为什么 output 与 React setState() 不同

Question

我不知道为什么

• 当我使用this.setState({count: count+1}点击多次只会更新一次计数
• 当我使用this.setState({count: this.setState.count})时，每次点击都会更新计数
• 为什么不同？

       class Demo extends React.Component {
            state = {count: 0};
            render() {
                const {count} = this.state;
                return  <button onClick={() => this.setState({count: count+1})}>count</button>
            }
            shouldComponentUpdate(){
                return false;
            } 

        }

• 环境react@16.8.4

Answer 1

因为他们的范围不同。

this.setState({count: this.setState.count+1})加载state.count号和重新分配的操作在同一个 onClick 事件 scope 中。

但是this.setState({count: count+1})中的count变量定义在 upper render() scope 和 onClick 事件中只接收count作为上层变量。 因此，render() function只运行一次，所以count in render()只初始化一次(loading state.count only once)； 当你点击按钮时，只会执行 onClick 事件 scope（重新分配动作会执行多次），而不是render() scope。这就是为什么 onClick 事件中的count变量将始终为 0。

您的案例有一个简单的等效示例：

 state={count:0} function upperLevel() { let {count} = state; function downlevel() { state = { count: count + 1 } console.log(state); } downlevel(); downlevel(); downlevel(); } upperLevel()

如果我们移动let {count} = state; 进入downlevel()则数字将增加。

 state = {count: 0} function upperLevel() { //let {count} = state; function downlevel() { let {count} = state; state = {count: count + 1 } console.log(state); } downlevel(); downlevel(); downlevel(); } upperLevel()