关于react.js:React-Hooks

一、组件类的毛病

v16.8 版本引入了全新的 API，叫做 React Hooks.

v16.8 版本之前，组件的规范写法是类（class）。上面是一个简略的组件类。

import React, {Component} from "react";

export default class Button extends Component {constructor() {super();
    this.state = {buttonText: "Click me, please"};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {this.setState(() => {return { buttonText: "Thanks, been clicked!"};
    });
  }
  render() {const { buttonText} = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

这个组件类仅仅是一个按钮，但能够看到，它的代码曾经很 ” 重 ” 了。实在的 React App 由多个类依照层级，一层层形成，复杂度成倍增长。再退出 Redux，就变得更简单。

Redux 的作者 Dan Abramov 总结了组件类的几个毛病。

• 大型组件很难拆分和重构，也很难测试。
• 业务逻辑扩散在组件的各个办法之中，导致反复逻辑或关联逻辑。
• 组件类引入了简单的编程模式，比方 render props 和高阶组件。

二、函数组件

React 团队心愿，组件不要变成 简单 的容器，最好只是 数据流 的管道。开发者依据须要，组合管道即可。组件的最佳写法应该是函数 ，而不是类。
不过之前的版本中函数定义组件

    function Welcome(props) {return <h1>Hello, {props.name}</h1>;
    }

然而，这种写法有重大限度，必须是 纯函数 ，不能蕴含 状态 ，也不反对 生命周期 办法，因而无奈取代类。React Hooks 的设计目标，就是加强版函数组件，齐全不应用 ” 类 ”，就能写出一个全功能的组件。也就是函数组件能够像类组件一样应用。

纯函数

三、Hook 的含意

Hook 这个单词的意思是 ” 钩子 ”。

React Hooks 的意思是，组件尽量写成纯函数，如果须要内部性能和副作用，就用钩子把内部代码 ” 钩 ” 进来。React Hooks 就是那些钩子。你须要什么性能，就应用什么钩子。React 默认提供了一些罕用钩子，你也能够封装本人的钩子。所有的钩子都是为函数引入内部性能，所以 React 约定，钩子一律应用 use 前缀命名，便于辨认。你要应用 xxx 性能，钩子就命名为 usexxx。
以下是 React 默认提供的四个最罕用的钩子。

• useState()
• useContext()
• useReducer()
• useEffect()

四 罕用 hooks

1. useState 状态钩子

useState() 用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子外面。

useState()这个函数承受状态的 初始值，作为参数，该函数返回一个数组，数组的第一个成员是一个变量，指向状态的以后值。第二个成员是一个函数，用来更新状态，约定是 set 前缀加上状态的变量名。

2. useEffect 副作用钩子

useEffect()用来引入具备副作用的操作，最常见的就是向服务器申请数据。以前，放在 componentDidMount 外面的代码，当初能够放在 useEffect()

语法：

     useEffect(()  =>  {// Async Action}, [dependencies])

useEffect()承受两个参数。第一个参数是一个函数，异步操作的代码放在外面。第二个参数是一个数组，用于给出 Effect 的依赖项，只有这个数组发生变化，useEffect()就会执行。第二个参数能够省略，这时每次组件渲染时，就会执行 useEffect()。

3. useReducer action 钩子

• React 自身不提供状态治理性能，通常须要应用内部库。这方面最罕用的库是 Redux。
• Redux 的外围概念是，组件收回 action 与状态管理器通信。状态管理器收到 action 当前，应用 Reducer 函数算出新的状态，Reducer 函数的模式是(state, action) => newState。

• useReducers()钩子用来引入 Reducer 性能。
  语法

  const [state, dispatch] = useReducer(reducer, initialState);

它承受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的以后值，第二个成员是发送 action 的 dispatch 函数。

4. useContext 共享状态钩子

如果须要在组件之间共享状态，能够应用 useContext()。

五、创立本人的 Hooks