1、组件 state ( 组件属性的定义和修改方式 )
组件中的属性分为state、props 和 普通属性。
组件的 state 应该代表着一个组件 UI 的最小状态集，即state中的所有状态都用于反应组件 UI 的变化，没有多余的状态，也不存在其他状态计算而来的中间状态。
state所代表的一个组件 UI 呈现的完整状态集分为两类数据：用作渲染组件时使用到的数据来源以及用作组件 UI 展现形式的判断依据。对于并不代表组件 UI 呈现状态但用于更改组件state的属性，以普通属性的形式定义：
class Hello extends React.Component {
constructor(props) {
super(props);
this.timer = null; // 为 Hello 组件定义timer属性，用于定时更新组件的状态
this.state = { date : new Date() } // state 中的属性仅用于 UI 显示
}
}
props 对于使用它的组件来讲是只读的，传递自父组件，而 state 用于维护组件内部自己的状态。
修改state的值时需要注意：只能用 this.setState 方法修改才会重新触发render ；不能以来当前的state和props计算下一个状态，如果有这种需求，需要使用函数：
this.setState( (preState, props) => ({
counter: preState.quantity + 1 ;
}) )
React 官方建议将state看作不变的对象，因此直接修改原来的量组件并不会重新渲染 render。所以，当状态的值是数组时，不可用直接用push等方法直接修改原数组，可使用concat、slice以及es5的5个迭代函数(filter等)返回新数组；当状态的值是对象时，可用两种方式：
// 使用 ES6 的Object.assign 方法
this.setState( preState => ({
owner: Object.assign( {},preState.owner, { name:'Jason' } );
}))
// 使用对象扩展语法
this.setSate( preState => ({
owner: {...preState.owner, name: 'Jason'};
}) )
2、组件与服务器通信
组件在挂载阶段通信的时候，建议在componentDidMount中执行，不仅安全，而且只会被执行一次：
class UserListContainer extends React.Component {
var that = this;
fetch('/path/to/user-api').then(function(response) {
response.json().then(function(data) {
that.setState({ user: data });
});
});
}
组件在更新阶段通信的时候，需要以 props 中的某个属性作为与服务器通信时的请求参数，因此componentWillReceiveProps非常适合做这个工作：
class UserListContainer extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.category !== this.props.category) {
fetch('/path/to/user-api?category=' +nextProps.category).then(
function (response) {
response.json().then(function(data){
that.setState({ users: data })
})
}
)
}
}
}
3、组件通信
组件间的通信依赖的是props。父组件通过 props 向子组件传递信息，而子组件通过父组件传递而来的回调函数向父组件通信。为了能够获取到父组件的属性，这里就要保证回调函数内 this 的指向，(在父组件中)可以通过 this.handleClick = this.handleClick.bind(this)的模式绑定this，也可以用 ES7 的方式：handleClick = (event) => { } 定义函数。
如果是两个兄弟组件(只要拥有一个共同的父组件)之间通信，可以将需要共享的状态保存到距离它们最近的共同父组件内。
当组件所处的层级太深时，利用props为桥梁的通信会显得繁琐。React提供了一个context上下文，让任意层级的子组件都可以获取父组件的状态和方法：
// 父组件 UserListContainer 内
// 创建 context 对象，包含 onAddUser 方法
getChildContext() {
return { onAddUser: this.handleAddUser }；
}
// 声明 context 的属性的类型信息
UserListContainer.childContextTypes = {
onAddUser : PropTypes.func
}
// 在子组件UserAdd中
// 声明要使用的 context 对象的属性
UserAdd.contextTypes = {
onAddUser: PropTypes.func
};
// 使用 this.context.onAddUser 访问
// 组件中的任意数据也可以通过 context 自动向下传递
虽然 context 给组件通信带来了便利，但是过多使用会使数据流混乱，而且context是一个实验性的API，在未来版本中可能会被废弃，所以要慎用。
除了依赖 React 组件自身的语法特性，还可以使用消息队列来实现组件通信。Redux 和 MobX 是当前非常受欢迎的两种状态管理库。
4、特殊的 ref
通过ref可以获得表单元素，也可以获得其他任意 DOM 元素，甚至可以用来获取 React 组件实例（只能为类组件定义ref属性，不可给函数组件定义）。在一些场景下，ref的使用可以带来便利，例如控制元素的焦点、文本的选择或者第三方操作 DOM 库集成。但绝大多数场景下，应该避免使用ref，因为它破坏了 React 的典型数据流。父组件可以通过ref间接获取子组件的某个DOM元素。
网友评论