React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代

这三者是目前react解决代码复用的主要方式：<ul><li style="text-align: start;">高阶组件（HOC）：是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。</li><li style="text-align: start;">render props：是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术，更具体的说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。</li><li style="text-align: start;">通常，render props 和高阶组件只渲染一个子节点。让 Hook 来服务这个使用场景更加简单。这两种模式仍有用武之地，（例如，一个虚拟滚动条组件或许会有一个 renderltem 属性，或是一个可见的容器组件或许会有它自己的 DOM 结构）。但在大部分场景下，Hook 足够了，并且能够帮助减少嵌套。</li></ul><blockquote style="text-align: start;">1）HOC 官方解释∶ 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。</blockquote>简言之，HOC是一种组件的设计模式，HOC接受一个组件和额外的参数（如果需要），返回一个新的组件。HOC 是纯函数，没有副作用。 <pre><code class="language-js">// hoc的定义
function withSubscription(WrappedComponent, selectData) {
 return class extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 data: selectData(DataSource, props)
 };
 }
 // 一些通用的逻辑处理
 render() {
 // ... 并使用新数据渲染被包装的组件!
 return &lt;WrappedComponent data={this.state.data} {...this.props} /&gt;;
 }
 };

// 使用
const BlogPostWithSubscription = withSubscription(BlogPost,
  (DataSource, props) =&gt; DataSource.getBlogPost(props.id));

</code></pre>HOC的优缺点∶<ul><li style="text-align: start;">优点∶ 逻辑服用、不影响被包裹组件的内部逻辑。</li><li style="text-align: start;">缺点∶ hoc传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖</li></ul>（2）Render props 官方解释∶<blockquote style="text-align: start;">"render prop"是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术</blockquote>具有render prop 的组件接受一个返回React元素的函数，将render的渲染逻辑注入到组件内部。在这里，"render"的命名可以是任何其他有效的标识符。<pre><code class="language-js">// DataProvider组件内部的渲染逻辑如下
class DataProvider extends React.Components {
 state = {
 name: 'Tom'
 }

render() {
    return (
        &lt;div&gt;
          &lt;p&gt;共享数据组件自己内部的渲染逻辑&lt;/p&gt;
          { this.props.render(this.state) }
      &lt;/div&gt;
    );
  }
}

// 调用方式
&lt;DataProvider render={data =&gt; (
 &lt;h1&gt;Hello {data.name}&lt;/h1&gt;
)}/&gt;
</code></pre>由此可以看到，render props的优缺点也很明显∶<ul><li style="text-align: start;">优点：数据共享、代码复用，将组件内的state作为props传递给调用者，将渲染逻辑交给调用者。</li><li style="text-align: start;">缺点：无法在 return 语句外访问数据、嵌套写法不够优雅</li></ul>3）Hooks 官方解释∶<blockquote style="text-align: start;">Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过自定义hook，可以复用代码逻辑。</blockquote>

DreamCoders/CoderGuide

內容風險標識

評論 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

內容風險標識