Javascript 类组件内部的功能组件定义'；s render（）方法，通过JSX创建时状态重置，但直接调用时不重置

如果我在类组件的

render（）

方法中定义了一个功能组件，那么每次调用类组件的

render（）

方法时，组件的状态都会被重置。如果我直接调用功能组件，状态不会重置

请看以下示例：

import React from 'react';
import Counter from './Counter'

const MilliCounter = ({name}) => {
    return <Counter name={name} initial={1e6} />
};

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: false
        }
    }

    onButtonClick = (event) => {
        this.setState({flag: !this.state.flag});
    };

    render() {
        const HundoCounter = ({name}) => {
            return <Counter name={name} initial={100} />
        };

        return (<div>
            <button onClick={this.onButtonClick}>Change State</button>
            <div>{`Flag: ${this.state.flag}`}</div>
            <HundoCounter name="Component Def Inside render() - Hundo JSX"/>
            {HundoCounter({name: 'Component Def Inside render() - Hundo Function Call'})}
            <MilliCounter name="Component Def Outside render() - Milli JSX"/>
            {MilliCounter({name: 'Component Def Outside render() - Milli Function Call'})}
        </div>)
    }
}

export default App;

从“React”导入React；
从“./Counter”导入计数器
常量毫计数器=（{name}）=>{
返回
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
旗帜：假
}
}
onButtonClick=（事件）=>{
this.setState（{flag:！this.state.flag}）；
};
render（）{
常量HundoCounter=（{name}）=>{
返回
};
返回(
改变状态
{`Flag:${this.state.Flag}`}
{HundoCounter（{name:'render（）中的组件定义-Hundo函数调用'}）}
{MilliCounter（{name:'Component Def Outside render（）-Milli函数调用'}）}
)
}
}
导出默认应用程序；

import*作为来自“React”的React
导出默认类计数器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：道具
}
}
onButtonClick=（事件）=>{
这是我的国家({
计数：this.state.count+1
})
};
render（）{
返回(
{this.props.name}
计数：{this.state.Count}

点击我
)
}
}

这里有一段视频显示了演示应用程序的运行情况。

如您所见，单击按钮时，会将标志更改为true，从而强制重新渲染。在此期间，用JSX定义的功能组件的状态被重置，但不是直接调用的状态

---

对我来说，状态重置是有意义的，因为每次调用

render（）

时，它都会创建一个新的

HundoCounter

定义。为什么直接作为函数调用的

HundoCounter

的状态没有得到重置？

我认为原因是您正在渲染父组件，然后在由于父组件重新渲染而重新渲染子组件时，它会重置initial={100}以将其设置回100

哪一种是预期的行为

---

至于为什么第二个没有重置，我不知道，但它没有重置似乎很奇怪，因为它的值也应该重置

好吧，这似乎很奇怪。我认为这与React的

对账

和

diff

算法有关。当我将key属性添加到Counter组件时，它的行为符合我们的预期

 const HundoCounter = ({ name }) => {
  console.log("hundo function")
  return <Counter key={Math.random()} name={name} initial={100} />
};

const HundoCounter=（{name}）=>{
console.log（“hundo函数”）
返回
};

---

我认为render（）方法被调用，diff算法在前一个结果和新结果上递归，函数以某种方式围绕组件，其行为就像是同一个组件一样。顺便说一句，我喜欢这个实验：）

这是个糟糕的做法。你为什么这么做？为了实验？@technophyle是的，为了实验。今天在一个更大的代码库中，我试图弄清楚为什么我的组件的状态会被重置，所以我试着像调用函数一样调用它，看看它是否有什么不同。

 const HundoCounter = ({ name }) => {
  console.log("hundo function")
  return <Counter key={Math.random()} name={name} initial={100} />
};