React 版本更新得太快，向下兼容做得不太好，所以放慢了学习。直到最近面试才知道很多公司都开始尝试使用 React 了，尤其是使用 React Native 开发移动混合 App。
不管是哪个版本的 React，它的设计思想是没有变的，核心之一就是组件生命周期。React 中状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。每个组件都会经历初始化、运行中和销毁三个阶段，每个阶段都有开发者可以自定义的函数，执行不同的行为。
上图解析了 React 组件生命周期。getDefaultProps() 和 getInitialState() 只对 createReactClass 或 React.createClass 声明的 React 组件有效，ES6 类声明的 React 组件请用 constructor()。React 16 还引入了 componentDidCatch()方法。这里只简述一下几个更常用的方法。
一、render()
render()方法是必需的。当被调用时，它会检查 this.props 和 this.state 并返回其中一个类型 :
- React 元素 通常是由 JSX 创建。该元素可能是一个原生 DOM 组件的表示，例如
<div />，或者是一个用户定义的合成组件()。 - 字符串和数字 这些将被渲染为 DOM 中的 text 节点。
Portals由ReactDOM.createPortal创建。null不渲染任何东西。
render() 函数应该是纯函数，这意味着它不会修改组件状态，每次调用它时返回相同的结果，它不会直接与浏览器交互。 如果您需要与浏览器交互，请改用 componentDidMount()或其他生命周期方法执行你的工作。保持 render()为纯函数使得组件更容易理解。
二、componentDidMount()
componentDidMount()方法在组件装载(mounting) 后被立即调用。初始化所需要的 DOM 节点的应该放在这里。 如果你需要从远程加载数据，这是一个实例化网络请求的好地方。
这种方法是设置任何订阅(subscriptions) 的好地方。如果你这样做，不要忘了在 componentWillUnmount() 中取消订阅(unsubscribe) 。
在这个方法中调用 setState()会触发一个额外的渲染， 但会在浏览器更新屏幕之前发生。在这种情况下，即使 render() 会被调用两次，也可以保证用户不会看到中间状态。请谨慎使用此模式，因为这通常会导致性能问题。 但是，当你需要测量一个 DOM 节点，并在渲染一些依赖于它的大小或位置的东西之前，这种情况下，这种模式可能会非常有用，比如模态框和工具提示 Tooltip 之类的组件。
三、componentWillReceiveProps()
componentWillReceiveProps(nextProps) 在已装载组件接收新 props 之前被调用。 如果您需要更新 state 以响应 props 的更改（例如重置它），则可以在此方法中比较 this.props 和 nextProps 并使用 this.setState() 执行状态转换。
注意，即使 prop 没有改变，React 也可能调用这个方法，因此如果你只想处理变化，请确保比较当前值和下一个值。当父组件导致你的组件重新渲染时，可能会发生这种情况。
在装载期间，React 不会用初始的 props 调用 componentWillReceiveProps 。如果某些组件的 props 可能更新，它只会调用此方法。调用 this.setState 一般不会触发 componentWillReceiveProps 。
四、componentDidUpdate()
componentDidUpdate(prevProps, prevState) 在更新发生后立即被调用。这个方法在第一次渲染时不会被调用。
当组件已更新时，使用此方法作为操作 DOM 的一个机会。这也是做网络请求的一个好地方，只需你比较当前 props 与以前的 prop（例如，如果 props 没有改变，可能不需要网络请求）
参考链接：React Component。
评论 (0)