为什么React必须使用setState来进行状态更新？

Question

为什么react必须使用setState来更新状态（树协调）。而不是简单地初始化 this.state.color = 'red';假设先前的颜色值为“绿色”。

Answer 1

这就是 React 的构建方式。

这个概念是你不应该可变地改变状态，就像这样：

this.state.color = 'red';

相反，你应该使用 setState:

this.setState({color: 'red'});

其背后的想法是，为了跟踪状态的变化并根据变化重新渲染组件，你必须使用setState，因为setState之后，渲染函数被触发。

Answer 2

当您使用

this.state.color = 'red';

改变状态时，它不会触发重新渲染。

this.setState({color: 'red'})

将创建一个新状态并将其分配给

this.state

以不可变的方式更改它，因此React将知道它已更改并将重新渲染组件。

这取决于 JavaScript 的工作方式，当您键入

let age = 34

或类似内容时，所有原始值（数字、字符串、布尔值、未定义、null）都会按值复制。

但是对象和数组是通过引用复制的。 您可以在这里阅读更多相关信息：JavaScript 是一种按引用传递还是按值传递的语言？

Answer 3

使用

this.state.color = 'red'

不会触发重新渲染，而

this.setState({ color: 'red })

则会触发。还有其他事情需要考虑。

https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

Answer 4

另一个重要原因是使用 setState 返回一个新状态并且不会改变原始状态，可以将其传递给纯组件。由于纯组件仅对对象进行浅层渲染，如果未返回新状态，则组件将不会重新渲染。

Answer 5

React JS 是单向绑定，因此状态变量只能在 setState 上更改，因此它会在 set 中的 setState 上渲染一次。

Answer 6

useState

函数可以内部访问其定义的顶级函数的行为。这并不神奇，只需使用

this

参考即可。

因此，通过调用

useState

函数，它会采用其更高级别的函数并使用

this

进行

DOM

比较。

创建简单示例

useState

:)

function createState(val) {
    this.val = val;
    this.call = 0;
    var that = this;
    var useState = function(state){
        this.that = that;
        that.val = state(that.val);

        that.call++;
      
        return that.val
    };
    
    return useState;
};

function useState(value) {
  return [value, createState.bind(null, value)()]; // pass null to access parent 
}

function App() {
    
  const  [val, setVal] =  useState(10)

  console.log(setVal(v => v+3));
  console.log(setVal(v => v+3));

  console.log("call: ", this.call)

}

App()

函数createState(val) { this.val = val; this.call = 0; var that = this; var useState = 函数（状态）{ 这个.那个=那个； that.val = 状态(that.val);

        that.call++;
      
        return that.val
    };
    
    return useState;
};

function useState(value) {
  return [value, makeState.bind(null, value)()]; // pass null to access parent 
}

function App() {
    
  const  [val, setVal] =  useState(10)

  console.log(setVal(v => v+3));
  console.log(setVal(v => v+3));

  console.log(this.call)

}

App()