React js教程：React 中的状态（5）

this.setState(data,callback);  

在 this.setState() 方法中，它执行数据的浅层合并，然后重新渲染组件。setState() 方法下的 data 参数包含包含要更新的键的对象或函数。 setState 方法下的可选回调参数包含函数。

setState() 是异步的，如果用户尝试在 setState() 之后立即访问 this.state，它不会立即更新值，有机会获得旧值。此方法计划更新，计算会延迟到需要时。

在 State 中，需要处理 3 件事，

• 除了在构造函数中之外，状态不应直接赋值，始终使用 setState() 方法赋值。
• 状态更新可能是异步的，因此用户不应依赖状态值来计算下一个状态值。
• 状态更新是浅合并，在 setState() 中可能存在多个变量，因此即使单独访问或更新，它也会合并值。

状态也被声明为本地或封装的，因为它只能在拥有它的函数或类中访问，而不管它是在无状态或有状态组件中。

Reconciliation process

React 有一个叫做 Reconciliation 的过程，这个过程包括了 React 在对组件进行状态改变时如何更新 DOM。当 setState() 方法被触发时，React 创建一个新的树，包含组件中的 React 元素以及更新的 State。该树用于通过将其元素与前一树进行比较来找出组件的 UI 应如何响应状态更改而更改。由于 React 知道需要进行哪些更改，这就是为什么 React 只会更新 DOM 的那部分，从而使 React 执行得更快。

演示

在 React 中，这里有一个使用 State 的演示。在这个演示中，我们在组件文件夹下创建了一个名为 StateDemo.js 的组件。

现在，让我们添加如下代码。

import React from 'react';  
class States extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {count: 0};  
        this.onClick = this.onClick.bind(this);  
    }  
      
    render() {  
        return (  
            <div onClick={this.onClick}>{this.state.count}</div> 
        );  
    }  
      
    onClick() {  
        this.setState({count: this.state.count + 1});  
        console.log(this.state.count);  
    }  
}  
  
export default States; 

import React,{Component} from 'react';  
import './App.css';  
import logo from './logo.svg';  
import States from './Components/StateDemo';  
  
class App extends Component {  
  render(){  
      return (  
      <div className="App">  
      <img src={logo} className="App-logo" alt="logo"/>  
        <States/>  
      </div>  
    );  
  }  
}  
  
export default App;  

import React from 'react';  
class States extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {count: 0};  
        this.onClick = this.onClick.bind(this);  
    }  
      
    render() {  
        return (  
            <div>  
                <h1>{this.state.count}</h1>  
                <button onClick={this.onClick}>Counter</button>  
            </div>  
        );  
    }  
      
    onClick() {  
        this.setState({count: this.state.count + 1});  
        console.log(this.state.count);  
    }  
}  
  
export default States;