react的高级技术点总结（一）

children prop

我们知道在子组件通过props来获取父组件提供的数据，通过上篇博客的内容（react之jsx语法）我们知道props可以是一些很常见的基本数据类型。如果我们想在父组件给子组件传递一个动态组件，这个组件也可以直接作为props的一部分，但是往往不推荐这种做法，因为react提供了一种语法来满足这种需求，children prop（jsx子元素）。
直接上案例：

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
     // 添加动态内容
    </div>
  );
}

现在我们需要在组件FancyBorder里动态内容，下面我们用上述的两种方式进行实现。
方式一：直接给props传递组件（不推荐）

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.content()}
    </div>
  );
}

function WelcomeDialog() {
  const Content = ()=>{
    return(
      <div>
        <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
      </div>
    );
  };
  return (
    <FancyBorder color="blue" content={Content} />
  );
}

ReactDOM.render(
  <WelcomeDialog />,
  document.getElementById('root')
);

方式二：使用props.children（推荐）

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <div>
        <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
      </div>
    </FancyBorder>
  );
}

ReactDOM.render(
  <WelcomeDialog />,
  document.getElementById('root')
);

运行此代码的网址：https://codepen.io/gaearon/pen/ozqNOV?editors=0010

react组件的生命周期方法

说起react组件的生命周期方法，相信用过的朋友都不陌生，最常用的两个方法分别是constructor() 和render() 。下面我给出官方教程的react生命周期图谱：

不难发现，在这个图谱中还出现了另外三个生命周期方法：componentDidMount() ，componentDidUpdate() 和componentWillUnmount() 。

componentDidMount()

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。

componentDidUpdate()

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里，否则会导致死循环。

componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作。
componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

小结

不难发现，componentDidMount()和componentDidUpdate()是render()的补充，而componentWillUnmount()是给它俩擦屁股。
我们知道state的改变会触发组件重新进行render操作，所以在render方法里不能执行setState()，因为此行为必然会造成死循环。但是由于某些特殊的场景需要的需要（比如网络请求），这时候componentDidMount()和componentDidUpdate()就是render()的补充，因为它俩可以执行setState()并且分别作用于首次渲染以及后续渲染中，而componentWillUnmount()就负责给它俩擦屁股。

结语

以上就是本篇博客的全部内容，后续我还会继续更新一些react相关的一些高级技术点，下期再会。