《React+Redux前端开发实战》—2.2 组件的主要成员

2.2  组件的主要成员

　　在React中，数据流是单向流动的，从父节点向子节点传递（自上而下）。子组件可以通过属性props接收来自父组件的状态，然后在render()方法中渲染到页面。每个组件同时又拥有属于自己内部的状态state，当父组件中的某个属性发生变化时，React会将此改变了的状态向下递归遍历组件树，然后触发相应的子组件重新渲染（re-render）。

　　如果把组件视为一个函数，那么props就是从外部传入的参数，而state可以视为函数内部的参数，最后函数返回虚拟DOM。

　　本节将学习组件中最重要的成员state和props。

2.2.1  状态（state）

　　每个React组件都有自己的状态，相比于props，state只存在于组件自身内部，用来影响视图的展示。可以使用React内置的setState()方法修改state，每当使用setState()时，React会将需要更新的state合并后放入状态队列，触发调和过程（Reconciliation），而不是立即更新state，然后根据新的状态结构重新渲染UI界面，最后React会根据差异对界面进行最小化重新渲染。

　　React通过this.state访问状态，调用this.setState()方法来修改状态。

　　React访问状态示例：

　　（源码地址为https://jsfiddle.net/allan91/etbj6gsx/1/）

　　class App extends React.Component {

　　  constructor(props){

　　    super(props);

　　    this.state = {

　　     data: 'World'

　　    }

　　  }

　　  render(){

　　    return(

　　     <div>

　　           Hello, {this.state.data}

　　     </div>

　　    )

　　  }

　　}

　　ReactDOM.render(

　　 <App />,

　　 document.querySelector(''#app'')    // App组件挂载到ID为app的DOM元素上

　　)

　　上述代码中，App组件在UI界面中展示了自身的状态state。下面使用setState()修改这个状态。

　　React修改状态示例：

　　（源码地址为https://jsfiddle.net/allan91/etbj6gsx/3/）

　　class App extends React.Component {

　　  constructor(props){

　　    super(props);

　　    this.state = {

　　     data: 'World'

　　    }

　　  }

　　   handleClick = () => {

　　   this.setState({

　　         data:'Redux'

　　    })

　　  }

　　  render(){

　　    return(

　　     <div>

　　           Hello, {this.state.data}

　　            <button onClick={this.handleClick}>更新</button>

　　     </div>

　　    )

　　  }

　　}

　　ReactDOM.render(

　　 <App />,

　　 document.querySelector("#app")

　　)

　　上述代码中通过单击“更新”按钮使用setState()方法修改了state值，触发UI界面更新。本例状态更改前后的展示效果，如图2.1所示。

图2.1  修改state