react-11 高阶组件

定义

A higher-order component is a functon that takes a component and return a new component

翻译:高阶组件就是个函数， 且该函数接受个组件作为参数， 并返回一个新的组件

高阶组件(HOC)是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是ReactAPI. 它
只是种模式， 这种模式是由react自身的组合性质必然产生的。

在我们项目中使用react-redux框架的时候，有一个connect的概念， 这里的connect其实就是一 个 高
阶组件。

函数内部通过props把值传给组件。

高阶组件是一个内有副作用的纯函数。（返回的是新的组件）

上面两个组件架构都一样，只是内容有所不同，因此可以抽象出一个函数。

hooks

Hook是React 16.8的新增特性。它可以让你在不编写class (类组件)的情况下使用state以及其他的React特性。从概念上讲，React组件一直更像是函数。而Hook则拥抱了函数，同时也没有牺牲React的精神原则。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。Hooks本质上是将类式组件中的操作进行了封装，通过hooks在 函数中调用，在函数内部生成自己的状态，生命周期等，通过hook进行调用，这也是为什么hooks只能在函数中使用，不能在类式组件中使用的原因(类式组件有自己的生命周期)

概述：

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Effect Hook 可以让你在函数组件中执行副作用操作

不要写在if，for循环里。