React的状态（state）概念和使用

概念

• React的每个组件都有一个状态，其保存在this.state中，当状态值发生变化时，React会自动调用render()方法重新渲染页面。
• this.state的值要要在构造函数中完成。
• 不能直接对state的值进行修改，需要调用this.setState()完成。
• 其它函数使用state需要为箭头函数。

实例代码

import React from 'react';class TestState extends React.Component {constructor(props) {super(props);//定义state，在构造函数中this.state = {dataList: [1, 2, 3],maxNum: 3}}render() {return <div>{/*使用state的值*/}<ul>{this.state.dataList.map(function (value, index) {return <li key={index}>{value}</li>;})}</ul>{/*在组件中直接使用state*/}<input type="button" value="点击" onClick={() => {let num = this.state.maxNum + 1;let arr = this.state.dataList;arr.push(num);this.setState({dataList: arr,maxNum: num});}}/><br/><br/>{/*通过方法使用state*/}<input type="button" value="测试" onClick={this.addItem}/></div>}//自定义函数使用state，需要使用箭头函数addItem = () => {let num = this.state.maxNum + 1;let arr = this.state.dataList;arr.push(num);this.setState({dataList: arr,maxNum: num});}
}export default TestState;