在 React 中,数据是自顶而下单向流动的,即从父组件到子组件。这条原则让组件之间的关系变得见得且可预测。
state 与 props 是 React 组件中最重要的概念。如果顶层组件初始化 props,那么 React 会向下遍历整棵组件树,重新尝试渲染所有相关的子组件。state 只关心每个组件自己内部的状态,这些状态只能在组件内变化。把组件看成一个函数,那么它接收了 props 作为参数,内部由 state 作为函数的内部参数,返回一个 Virtual DOM 的实现。
state
state 是组件内部状态,修改 state 的值修改需要通过 setState 方法,禁止直接修改 state,setState 是一个异步方法,修改完成会有一个回调方法,一个生命周期内所有 setState 方法会合并统一操作。
不推荐过多的使用 state,当数据更新同时需要更新界面的时候,才使用 state,并且尽量将 state 推到系统边缘,统一管理 state。过多的内部状态会让数据流混乱,程序变得难以维护。
props
props 是 properties 缩写,是 React 用来让组件之间相互联系的一种机制。
React 的单向数据流,主要的流动管道就是 props,props 本身是不可变的。
注意:父组件传递的 props,作为子组件的 state,会产生引用对象影响问题,也就是赋值是一个浅复制,会导致 state 改变进而导致 父组件的 props 改变。
React 中有一个内置的 prop -- children,代表子组件的集合。
ES6 方法定义的组件类中,可以通过增加类的 protTypes 属性来定义 prop 规格,这不只是声明,而且是一种限制,在运行时和静态代码检查时,都可以根据 propTypes 判断外部是否正确地使用了组件的属性。
import PropTypes from 'prop-types';
static propTypes = {
data: PropTypes.object.isRequired,
onPress: PropTypes.func,
};
对于带上 isRequired 的属性,表示使用时必须要指定,没有带上的则表示没有也无所谓。
propTypes 支持基本类型,还支持枚举和自定义类型。
prop 和 state 的对比
- prop 用于定义外部接口,state用于纪录内部状态;
- prop 的赋值在外部使用组件时,state 的赋值在组件内部;
- 组件不应该改变 prop 的值,而 state 存在的目的就是让组件来改变。
网友评论