听说你还不懂ReactHook？-创新互联

import { useState } from 'React';
function Example() {
 // Declare a new state variable, which we'll call "count"
 const [count, setCount] = useState(0);
 return (
 

 
You clicked {count} times
  setCount(count + 1)}>
 Click me
 
 
 );
}
复制代码

class Example extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 count: 0
 };
 }
 render() {
 return (
 

 
You clicked {this.state.count} times
  this.setState({ count: this.state.count + 1 })}>
 Click me
 
 
 );
 }
}
复制代码

var SetIntervalMixin = {
 componentWillMount: function() {
 this.intervals = [];
 },
 setInterval: function() {
 this.intervals.push(setInterval.apply(null, arguments));
 },
 componentWillUnmount: function() {
 this.intervals.forEach(clearInterval);
 }
};
var createReactClass = require('create-React-class');
var TickTock = createReactClass({
 mixins: [SetIntervalMixin], // 使用 mixin
 getInitialState: function() {
 return {seconds: 0};
 },
 componentDidMount: function() {
 this.setInterval(this.tick, 1000); // 调用 mixin 上的方法
 },
 tick: function() {
 this.setState({seconds: this.state.seconds + 1});
 },
 render: function() {
 return (
 

 React has been running for {this.state.seconds} seconds.
 
 );
 }
});
ReactDOM.render(
 ,
 document.getElementById('example')
);
复制代码

function logProps(WrappedComponent) {
 return class extends React.Component {
 componentWillReceiveProps(nextProps) {
 console.log('Current props: ', this.props);
 console.log('Next props: ', nextProps);
 }
 render() {
 return ;
 }
 }
}
复制代码

class Cat extends React.Component {
 render() {
 const mouse = this.props.mouse;
 return (
 
 );
 }
}
class Mouse extends React.Component {
 constructor(props) {
 super(props);
 this.handleMouseMove = this.handleMouseMove.bind(this);
 this.state = { x: 0, y: 0 };
 }
 handleMouseMove(event) {
 this.setState({
 x: event.clientX,
 y: event.clientY
 });
 }
 render() {
 return (
 
 {this.props.render(this.state)}
 

然而通常我们说的Render Props 是因为模式才被称为 Render Props ，又不是因为一定要用render对prop进行命名。我们也可以这样来表示

 {mouse => (
 
 )}

复制代码

React Hook动机

React Hook是官网提出的又一种全新的解决方案，在了解React Hook之前，我们先看一下React Hook提出的动机

1. 在组件之间复用状态逻辑很难

2. 复杂组件变得难以理解

3. 难以理解的 class

下面说说我对这三个动机的理解:

在组件之间复用状态逻辑很难，在之前，我们通过高阶组件（Higher-Order Components）和渲染属性（Render Propss）来解决状态逻辑复用困难的问题。很多库都使用这些模式来复用状态逻辑，比如我们常用redux、React Router。高阶组件、渲染属性都是通过组合来一层层的嵌套共用组件，这会大大增加我们代码的层级关系，导致层级的嵌套过于夸张。从React的devtool我们可以清楚的看到，使用这两种模式导致的层级嵌套程度

复杂组件变得难以理解，在不断变化的业务需求中，组件逐渐会被状态逻辑以及副作用充斥，每个生命周期常常会包含一些不相关的逻辑。我们写代码通常都依据函数的单一原则，一个函数一般只处理一件事，但在生命周期钩子函数中通常会同时做很多事情。比如，在我们需要在componentDidMount中发起ajax请求获取数据,同时有时候也会把事件绑定写在此生命周期中，甚至有时候需要在componentWillReceiveProps中对数据进行跟componentDidMount一样的处理。

相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。

难以理解的class,个人觉得使用class组件这种还是可以的，只要了解了class的this指向绑定问题，其实上手的难度不大。大家要理解，这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。所以只要了解好JS函数工作原理，其实this绑定都不是事。只是有时候为了保证this的指向正确，我们通常会写很多代码来绑定this,如果忘记绑定的话，就有会各种bug。绑定this方法:

1.this.handleClick = this.handleClick.bind(this);
2. this.handleClick(e)}>
 Click me
 
复制代码

于是为了解决以上问题，React Hook就被提出来了

state Hook使用

我们回到刚刚的代码中，看一下如何在函数式组件中定义state

import React, { useState } from 'React';
const [count, setCount] = useState(0);
复制代码

1. useState做了啥

2. 我们可以看到，在此函数中，我们通过useState定义了一个'state变量',它与 class 里面的 this.state 提供的功能完全相同.相当于以下代码

class Example extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 count: 0
 };
 }
复制代码

1. useState参数

2. 在代码中，我们传入了0作为useState的参数，这个参数的数值会被当成count初始值。当然此参数不限于传递数字以及字符串，可以传入一个对象当成初始的state。如果state需要储存多个变量的值，那么调用多次useState即可

3. useState返回值

4. 返回值为：当前 state 以及更新 state 的函数，这与 class 里面 this.state.count 和 this.setState 类似，唯一区别就是你需要成对的获取它们。看到[count, setCount]很容易就能明白这是ES6的解构数组的写法。相当于以下代码

let _useState = useState(0);// 返回一个有两个元素的数组
let count = _useState[0];// 数组里的第一个值
let setCount = _useState[1];// 数组里的第二个值
复制代码

读取状态值

只需要使用变量即可

以前写法

You clicked {this.state.count} times
复制代码

现在写法

You clicked {count} times
复制代码

更新状态

通过setCount函数更新

以前写法

 this.setState({ count: this.state.count + 1 })}>
 Click me
 
复制代码

现在写法

  setCount(count + 1)}>
 Click me
 
复制代码

这里setCount接收的参数是修改过的新状态值

声明多个state变量

我们可以在一个组件中多次使用state Hook来声明多个state变量

function ExampleWithManyStates() {
 // 声明多个 state 变量！
 const [age, setAge] = useState(42);
 const [fruit, setFruit] = useState('banana');
 const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
 // ...
}
复制代码

React 假设当你多次调用 useState 的时候，你能保证每次渲染时它们的调用顺序是不变的

为什么React要规定每次渲染它们时的调用顺序不变呢，这个是一个理解Hook至关重要的问题

Hook 规则

Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。并且React要求强制执行这两条规则，不然就会出现异常的bug

1. 只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们

1. 只在 React 函数中调用 Hook

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

这两条规则出现的原因是，我们可以在单个组件中使用多个State Hook 或 Effect Hook，React 靠的是 Hook 调用的顺序来知道哪个 state 对应哪个useState

function Form() {
 const [name1, setName1] = useState('Arzh2');
 const [name2, setName2] = useState('Arzh3');
 const [name3, setName3] = useState('Arzh4');
 // ...
}
// ------------
// 首次渲染
// ------------
useState('Arzh2') // 1. 使用 'Arzh2' 初始化变量名为 name1 的 state
useState('Arzh3') // 2. 使用 'Arzh3' 初始化变量名为 name2 的 state
useEffect('Arzh4') 	// 3. 使用 'Arzh4' 初始化变量名为 name3 的 state
// -------------
// 二次渲染
// -------------
useState('Arzh2') // 1. 读取变量名为 name1 的 state（参数被忽略）
useState('Arzh3') // 2. 读取变量名为 name2 的 state（参数被忽略）
useEffect('Arzh4') // 3. 读取变量名为 name3 的 state（参数被忽略）
复制代码

如果我们违反React的规则，使用条件渲染

if (name !== '') {
 const [name2, setName2] = useState('Arzh3');
}
复制代码

假设第一次(name !== '')为true的时候，执行此Hook，第二次渲染(name !== '')为false时，不执行此Hook，那么Hook的调用顺序就会发生变化，产生bug

useState('Arzh2') // 1. 读取变量名为 name1 的 state
//useState('Arzh3') // 2. Hook被忽略
useEffect('Arzh4') // 3. 读取变量名为 name2(之前为name3) 的 state
复制代码

React 不知道第二个 useState 的 Hook 应该返回什么。React 会以为在该组件中第二个 Hook 的调用像上次的渲染一样，对应的是 arzh3 的 useState，但并非如此。所以这就是为什么React强制要求Hook使用必须遵循这两个规则，同时我们可以使用 eslint-plugin-React-Hooks来强制约束

Effect Hook使用

我们在上面的代码中增加Effect Hook的使用,在函数式组件中增加副作用，修改网页的标题

 useEffect(() => {
 document.title = `You clicked ${count} times`;
 });
复制代码

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

也就是我们完全可以通过useEffect来替代这三个生命钩子函数

我们来了解一下通常需要副作用的场景，比如发送请求，手动变更dom，记录日志等。通常我们都会在第一次dom渲染完成以及后续dom重新更新时，去调用我们的副作用操作。我们可以看一下以前生命周期的实现

 componentDidMount() {
 document.title = `You clicked ${this.state.count} times`;
 }
 componentDidUpdate() {
 document.title = `You clicked ${this.state.count} times`;
 }
复制代码

这也就是我们上面提到的React Hook动机的第二个问题来源之一，需要在第一次渲染以及后续的渲染中调用相同的代码

Effect在默认情况下，会在第一次渲染之后和每次更新之后都会执行，这也就让我们不需要再去考虑是componentDidMount还是componentDidUpdate时执行，只需要明白Effect在组件渲染后执行即可

清除副作用

有时候对于一些副作用，我们是需要去清除的，比如我们有个需求需要轮询向服务器请求最新状态，那么我们就需要在卸载的时候，清理掉轮询的操作。

 componentDidMount() {
 this.pollingNewStatus()
 }
 componentWillUnmount() {
 this.unPollingNewStatus()
 }
复制代码

我们可以使用Effect来清除这些副作用，只需要在Effect中返回一个函数即可

 useEffect(() => {
 pollingNewStatus()
 //告诉React在每次渲染之前都先执行cleanup()
 return function cleanup() {
 unPollingNewStatus()
 };
 });
复制代码

有个明显的区别在于useEffect其实是每次渲染之前都会去执行cleanup(),而componentWillUnmount只会执行一次。

Effect性能优化

useEffect其实是每次更新都会执行，在某些情况下会导致性能问题。那么我们可以通过跳过 Effect 进行性能优化。在class组件中，我们可以通过在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑解决

componentDidUpdate(prevProps, prevState) {
 if (prevState.count !== this.state.count) {
 document.title = `You clicked ${this.state.count} times`;
 }
}
复制代码

在Effect中，我们可以通过增加Effect的第二个参数即可，如果没有变化，则跳过更新

useEffect(() => {
 document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

有更多资料视频，加小可乐丫

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。