我们知道react是尽量避免操作dom节点来提高性能的，那么不操作dom去改变页面显示那通过什么方式来改变页面显示呢，react通过组件的属性state来解决这个问题，通过触发事件去调用setState方法，达到改变state的值的目的，从而触发组件重新渲染，达到更新页面显示的效果。state属于react的三大核心组件中最重要的属性，有着以下特点：
1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)，这样就可以避免通过操作dom来完成组件更新；
以下的state的使用示例中，我们通过类的构造函数初始化一个state状态，描述今天的心情状态，这个构造函数会在组件初始化的时候被调用一次，是比render方法更早调用，所以在创建这个组件实例的时候，会是先读取初始化state，然后通过render渲染到组件上，又通过组件的onClick点击事件触发changeMood方法，调用setState方法，引发state的变化从而达到组件的重新渲染，获取触发事件后的最新状态信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="root"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1.创建组件
class Mood extends React.Component{
//构造器调用几次？ ———— 1次
constructor(props){
console.log(‘constructor‘);
super(props)
//初始化状态
this.state = {isHappy:false,isGood:‘nice‘}
//解决changeMood中this指向问题
this.changeMood = this.changeMood.bind(this)
}
//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
render(){
console.log(‘render‘);
//读取状态
const {isHappy,isGood} = this.state
return <h1 onClick={this.changeMood}>今天心情很{isHappy ? ‘开心‘ : ‘不爽‘}，{isHappy?isGood:‘not ‘+isGood}</h1>
}
//changeMood调用几次？ ———— 点几次调几次
changeMood(){
//changeMood放在哪里？ ———— Mood的原型对象上，供实例使用
//由于changeMood是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以changeMood中的this为undefined
console.log(‘changeMood‘);
//获取原来的isHot值
const isHappy = this.state.isHappy
//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
this.setState({isHappy:!isHappy})
console.log(this);
//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
//this.state.isHappy = !isHappy //这是错误的写法
}
}
//2.渲染组件到页面
ReactDOM.render(<Mood/>,document.getElementById(‘root‘))
</script>
</body>
</html>
细心的朋友可能会发现构造函数有传个props的参数，这个是组件的另一个核心属性，通过这个参数可以实现组件之间的参数传递，这个会在下一节详细讲解，还有朋友可能会看到构造函数里有一段这样的代码：this.changeMood = this.changgeMood.bind(this)，这段其实是为了解决changgeMood方法里的this指向问题，如果不加这段，changeMood的this会指向undefined，原因是changeMood中的this并不是指向类本身的，而是浏览器的window的，而react中的类创建开启了严格模式，this就指向了undefined了，所以有两种解决方式，一种是在构造函数里让这个类加个changeMood的属性指向绑定到当前类；另一种则是可以直接把方法改为箭头函数即可，所以上面的构造函数里的this.changeMood = this.changgeMood.bind(this)可以不写，把changeMood(){...}改成changeMood=()=>{...}的方式，朋友们可以试试~
原文：https://www.cnblogs.com/xfly-lin/p/14453256.html