React Hooks（一）之简介和搭建

一、简介

Hook 是 React 16.8.0 的新增特性,React Native 0.59 及更新版本会支持 Hook。
以往的react使用class实现组件编写，Hook是一个特殊的函数，让我们可以在函数组件里“钩入” React state 及生命周期等特性的函数。

官网文档链接：https://react.docschina.org/docs/hooks-intro.html

二、Hook特点

1、类组件不足

• 状态逻辑复用难：缺少复用机制（为了复用组件相互继承不可取）；渲染属性和高阶组件会导致层级冗余，很难拆分重构和测试
• 趋向复杂难以维护：生命周期函数混杂了不相干逻辑；相关逻辑又分散在不同生命周期。
• class相对难理解，this指向问题较为困扰：内联函数过度创建新句柄，类成员函数不能保证this指向

2、HOOK优势

• 函数组件无this问题
• 自定义Hook方便复用状态逻辑
• useEffect代替生命周期，将细碎但相同的代码功能片段结合成了一个完整的代码块
• 有状态的组件没有渲染，有渲染的组件没有状态：Hook中多个状态不会产生嵌套，更容易将ui与状态进行分离

注意：Hook 和现有代码可以同时工作，你可以渐进式地使用他们。 不用急着迁移到 Hook。建议避免任何“大规模重写”，尤其是对于现有的、复杂的 class 组件

三、搭建

create-react-app是一个很好的脚手架，可以用来基础搭建

mkdir hooks_demo
create-react-app hooks_demo
cd hooks_demo

四、使用规则

1、规则

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook，确保 Hook 在每一次渲染中都按照同样的顺序被调用

在单个组件中可以使用多个 State Hook 或 Effect Hook， 而React 靠的是 Hook 调用的顺序知道哪个 state 对应哪个 useState，只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联。

只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook。

• 在 React 的函数组件中调用 Hook
• 在自定义 Hook 中调用其他 Hook

2、插件

eslint-plugin-react-hooks的 ESLint 插件可以用来强制执行以上两条规则，并且限制对 Hook 的调用要么在一个大驼峰法命名的函数（视作一个组件）内部，要么在另一个 useSomething 函数（视作一个自定义 Hook）中。

npm install eslint-plugin-react-hooks --save-dev

package.json中ESLint 配置

"eslintConfig":{
  "extends": "react-app",
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}

配置完之后输入npm run start可以开始运行

五、初始化

demo范例可以将src内的文件删除只剩index.js和App.js

index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

App.js

import React, { Component } from 'react';

class App extends Component {
    render() { 
        return null
    }
}
 
export default App;