受控组件与非受控组件

在设计React 组件的时候，一定要注意数据来源，确保每一个数据都只有一个数据源。比如一个 state 不能既受 setState 的改变，又受 props 的变化而变化（比如 componentWillReceiveProps 或是 getDerivedStateFromProps 中）。

一旦遇到多数据来源的情况，请将其按照以下方案进行重新设计。

getDerivedStateFromProps 的作用：

1. state 只受到 props 的影响；
2. 只有当 state 与 prop 不同时，才去修改 state ；

受控组件

受控组件是指 state 完全受Prop控制的组件。通常，建议将组件设计成完全受控组件。

const ControlComponent = (props) => {
  reutrn (<div>{ props.name }</div>)
}

//  或者
class ControlComponent extends React.Component {
  state = {
    name: 'xxx'
  }
	
	// 使用了 getDerivedStateFromProps 类更新的state，最好不要在组件中再使用
	// setState 来修改了，要保证数据来源的唯一性。
  staric getDerivedStateFromProps(nextProps, preState) {
    return {name: nextProps.name}
  }
}
复制代码