在 React 里有两种数据来控制一个组件:state (状态)和 props (properties), 是 React 用来更新数据的核心特性
一、 state 属性
React 是基于状态实现对DOM控制和渲染,React 把用户界面当作状态机,根据状态变化渲染用户界面,可以让用户界面和数据保持一致。
state 属性是组件自己私有的, 主要用来存储组件自身需要的数据,我们一般通过修改 state 属性的值来更新数据,React 内部会监听 state 的变化,一旦发生变化就会主动触发组件的 render() 方法来更新 Dom 结构, 因此 state 数据是可变的。
1. state 的使用
一般来说,你需要在 constructor() 方法中初始化 state(这是ES6的写法,ES5 中一般在 getInitialState() 方法中来初始化 state),然后在需要修改时调用 setState() 方法。
不要使用 this.state 来修改 state 属性值,应该调用 setState() 方法,this.state 是不可变的。
2. setState() 方法
1 | setState(updater, [callback]) |
setState() 方法会把对组件 state 的改变加入到队列中,并且告诉 React 这个组件及其子组件需要重新渲染。updater可以是个函数也可以是个对象。
updater 是个函数:
1 | (prevState, props) => stateChange |
prevState 是一个对之前状态(previous state)的引用,我们是不能直接修改这个参数的值,要想修改 state 的值,我们应该根据 prevState 和 props 参数来创建一个新的 JavaScript 对象。
例如:1
2
3this.setState((prevState, props) => {
return {counter: prevState.counter + props.step};
});
如果是对象,React 会将该参数 merge 到 state 中。
例如:1
this.setState({quantity: 2});
二、单向数据流
父组件和子组件之间不能通过 state 来交互,父组件只能将自己的 state 值传给子组件的 props。这种数据传递的方式通常被称为 “自顶向下(top-down)”或者“单向(unidirectional)”数据流。
任何 state 都是由一个特定的组件所拥有的,任何由 state 驱动的数据或者 UI 只会影响到该组件的子组件。
如果你将组件树想象成一个 props 瀑布,那么每个组件的状态就像是那个组件水源上的附属品,但是也是向下流动的。
props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点