React 新特性React Hooks

有了React Hooks再也不需要写Class了，你的所有组件都将是Function，不区分无状态组件（Function）和有状态组件（Class），因此生命周期钩子函数可以先丢一边了。
一个最简单的Hooks
首先让我们看一下一个简单的有状态组件：

class Test1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  render() {
    return (
      <div>
        <h4>一个简单的有状态组件</h4>
        <p>You clicked {this.state.count}</p>
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1
            });
          }}
        >
          Click me
        </button>
      </div>
    )
  }
}

我们再来看一下使用hooks后的版本：

import { useState } from 'react';
function Test2() {
  const [ count, setCount ] = useState(0);
  return (
    <div>
      <h4>使用hooks后的版本</h4>
      <p>You clicked {count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click me
      </button>
    </div>
  );
}

看上去简单多了！Test2变成了一个函数，但这个函数却有自己的状态（count），同时它还可以更新自己的状态（setCount）。这个函数之所以这么了不得，就是因为它注入了一个hook-- useState，就是这个hook让我们的函数变成了一个有状态的函数。

除了 useState这个hook外，还有很多别的hook，比如 useEffect提供了类似于 componentDidMount等生命周期钩子的功能， useContext提供了上下文（context）的功能等等。

React之所以要搞一个Hooks是因为想要复用一个有状态的组件太麻烦了！
我们都知道react都核心思想就是，将一个页面拆成一堆独立的，可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。

那之前，官方推荐怎么解决这个问题呢？答案是：渲染属性（Render Props）和高阶组件（Higher-Order Components）。我们可以稍微跑下题简单看一下这两种模式。

渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到我们的 DataProvider组件包含了所有跟状态相关的代码，而 Cat组件则可以是一个单纯的展示型组件，这样一来 DataProvider就可以单独复用了。

class Test3 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      target: 'Test3'
    }
  }

  render() {
    return (
      <div>
        <h4>渲染属性（Render Props）</h4>
        {this.props.render(this.state)}
      </div>
    )
  }
}

<Test3 
  render={data => {
    return <Test3Children target={data.target} />;
  }}
/>

高阶组件说白了就是一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件。看下面的代码示例， WithComponent函数就是一个高阶组件，它返回了一个新的组件，这个组件具有了它提供的获取用户信息的功能

const Test4Children = (props) => {
  //{target: "高阶组件: WithComponent", a: "123"}
  console.log('Test4Children', props);
  return (
    <div>
      {props.target}
    </div>
  );
}
const WithComponent = ChildrenComponent => {
  const target = '高阶组件: WithComponent';
  return props => {
    //{a: "123"}
    console.log('WithComponent', props);
    return (
      <ChildrenComponent target={target} {...props} />
    );
  }
}
const Test4 = WithComponent(Test4Children);

<Test4 a="123" />

以上这两种模式看上去都挺不错的，但我们仔细看这两种模式，会发现它们会增加我们代码的层级关系。最直观的体现，打开devtool看看你的组件层级嵌套是不是很夸张吧,相比较Hooks没有多余的层级嵌套

有状态组件生命周期钩子函数里的逻辑太乱了吧！
我们通常希望一个函数只做一件事情，但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在 componentDidMount中发起ajax请求获取数据，绑定一些事件监听等等。同时，有时候我们还需要在 componentDidUpdate做一遍同样的事情。当项目变复杂后，这一块的代码也变得不那么直观。

class中this指向真的太让人困惑了
我们用class来创建react组件时，还有一件很麻烦的事情，就是this的指向问题。为了保证this的指向正确，我们要经常写这样的代码： this.handleClick=this.handleClick.bind(this)，或者是这样的代码： <button onClick={()=>this.handleClick(e)}>。一旦我们不小心忘了绑定this，各种bug就随之而来，很麻烦。

还有一件让我很苦恼的事情。我在之前的react系列文章当中曾经说过，尽可能把你的组件写成无状态组件的形式，因为它们更方便复用，可独立测试。然而很多时候，我们用function写了一个简洁完美的无状态组件，后来因为需求变动这个组件必须得有自己的state，我们又得很麻烦的把function改成class。

在这样的背景下，Hooks便横空出世了！

State Hooks
useState是react自带的一个hook函数，它的作用就是用来声明状态变量。 useState这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第 [0]项是当前当前的状态值，第 [1]项是可以改变状态值的方法函数。

假如一个组件有多个状态值
首先，useState是可以多次调用的，所以我们完全可以这样写:

  function Test(){
      const [ name, setName ] = useState('ltns');
      const [age, setAge ] = useState(22);
      const [todo, setTodo] = useState([{text: 'Learn Hooks'}]);
  }

其次，useState接收的初始值没有规定一定要是string/number/boolean这种简单数据类型，它完全可以接收对象或者数组作为参数。唯一需要注意的点是，之前我们的 this.setState做的是合并状态后返回一个新状态，而 useState是直接替换老状态后返回新状态。最后，react也给我们提供了一个useReducer的hook，如果你更喜欢redux式的状态管理方案的话。

从Test函数我们可以看到，useState无论调用多少次，相互之间是独立的。这一点至关重要。为什么这么说呢？

其实我们看hook的“形态”，有点类似之前被官方否定掉的Mixins这种方案，都是提供一种“插拔式的功能注入”的能力。而mixins之所以被否定，是因为Mixins机制是让多个Mixins共享一个对象的数据空间，这样就很难确保不同Mixins依赖的状态不发生冲突。

而现在我们的hook，一方面它是直接用在function当中，而不是class；另一方面每一个hook都是相互独立的，不同组件调用同一个hook也能保证各自状态的独立性。这就是两者的本质区别了。

react是怎么保证多个useState的相互独立的
还是看上面给出的Test例子，我们调用了三次useState，每次我们传的参数只是一个值（如42，‘banana’），我们根本没有告诉react这些值对应的key是哪个，那react是怎么保证这三个useState找到它对应的state呢？

答案是，react是根据useState出现的顺序来定的。
因此react规定我们必须把hooks写在函数的最外层，不能写在ifelse等条件语句当中，来确保hooks的执行顺序一致。

import React, { Component, useState, useEffect } from 'react';
// 使用Effect hooks后的版本(实现生命周期)
function Test5() {
  const [ count, setCount ] = useState(0);
  // 类似于componentDidMount 和componentDidUpdate
  useEffect(() => {
    // 更新文档的标题
    document.title = `你点击了${count}次`;
  });
  return (
    <div>
      <h4>使用Effect hooks后的版本(实现生命周期)</h4>
      <p>You clicked {count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click me
      </button>
    </div>
  );
}
// 对比普通有状态组件的生命周期
class Test6 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  componentDidMount() {
    document.title = `你点击了${this.state.count}次`;
  }
  componentDidUpdate() {
    document.title = `你点击了${this.state.count}次`;
  }
  render() {
    return (
      <div>
        <h4>对比普通有状态组件的生命周期</h4>
        <p>You clicked {this.state.count}</p>
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1
            });
          }}
        >
          Click me
        </button>
      </div>
    )
  }
}

useEffect做了什么
梳理一遍下面代码的逻辑：

function Test5() {
  const [ count, setCount ] = useState(0);
  // 类似于componentDidMount 和componentDidUpdate
  useEffect(() => {
    // 更新文档的标题
    document.title = `你点击了${count}次`;
  });
}

首先，我们声明了一个状态变量 count，将它的初始值设为0。然后我们告诉react，我们的这个组件有一个副作用。我们给 useEffecthook传了一个匿名函数，这个匿名函数就是我们的副作用。在这个例子里，我们的副作用是调用browser API来修改文档标题。当react要渲染我们的组件时，它会先记住我们用到的副作用。等react更新了DOM之后，它再依次执行我们定义的副作用函数。

这里要注意几点：

第一，react首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数。而之前我们要用两个声明周期函数来分别表示首次渲染（componentDidMount），和之后的更新导致的重新渲染（componentDidUpdate）。

第二，useEffect中定义的副作用函数的执行不会阻碍浏览器更新视图，也就是说这些函数是异步执行的，而之前的componentDidMount或componentDidUpdate中的代码则是同步执行的。这种安排对大多数副作用说都是合理的，但有的情况除外，比如我们有时候需要先根据DOM计算出某个元素的尺寸再重新渲染，这时候我们希望这次重新渲染是同步发生的，也就是说它会在浏览器真的去绘制这个页面前发生。

useEffect怎么解绑一些副作用
这种场景很常见，当我们在componentDidMount里添加了一个注册，我们得马上在componentWillUnmount中，也就是组件被注销之前清除掉我们添加的注册，否则内存泄漏的问题就出现了。

怎么清除呢？让我们传给useEffect的副作用函数返回一个新的函数即可。这个新的函数将会在组件下一次重新渲染之后执行。这种模式在一些pubsub模式的实现中很常见。看下面的例子：(这一块儿还不是很清楚借用别人的例子)

// useEffect怎么解绑一些副作用
function FriendStatus(props) {
  const [ isOnline, setIsOnline ] = useState(null);
  function handleStattusChange(status) {
    setIsOnline(status.isOnline);
  };
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
    // 一定注意下这个顺序：告诉react在下次重新渲染组件之后，同时是下次调用ChatAPI.subscribeToFriendStatus之前执行cleanup
    return function cleanup() {
      ChatAPI.unsubscribeFriendStatus(props.friend.id, handleStattusChange);
    }
  })
  if(isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

这里有一个点需要重视！这种解绑的模式跟componentWillUnmount不一样。componentWillUnmount只会在组件被销毁前执行一次而已，而useEffect里的函数，每次组件渲染后都会执行一遍，包括副作用函数返回的这个清理函数也会重新执行一遍。
为什么要让副作用函数每次组件更新都执行一遍？

**加粗文字**
  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
  }
  componentDidUpdate() {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
  }

很清除，我们在componentDidMount注册，再在componentWillUnmount清除注册。但假如这时候 props.friend.id变了怎么办？我们不得不再添加一个componentDidUpdate来处理这种情况：

  componentDidUpdate() {
    // 先把上一个friend.id解绑
    ChatAPI.unsubscribeFriendStatus(props.friend.id, handleStattusChange);
    // 再重新注册新的friend.id
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
  }

因此原有方法很繁琐，而我们但useEffect则没这个问题，因为它在每次组件更新后都会重新执行一遍。所以代码的执行顺序是这样的：

页面首次渲染
替friend.id=1的朋友注册
突然friend.id变成了2
页面重新渲染
清除friend.id=1的绑定
替friend.id=2的朋友注册
...

怎么跳过一些不必要的副作用函数
按照上一节的思路，每次重新渲染都要执行一遍这些副作用函数，显然是不经济的。怎么跳过一些不必要的计算呢？我们只需要给useEffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（第一个参数）。
当我们第二个参数传一个空数组[]时，其实就相当于只在首次渲染的时候执行。也就是componentDidMount加componentWillUnmount的模式。不过这种用法可能带来bug，少用。

  useEffect(() => {
    document.title = `你点击了${count}次`;
  }, [count]);//只有当count的值发生变化时，才重新执行'document.title'这一句;

除了上文重点介绍的useState和useEffect，react还给我们提供来很多有用的hooks

useContext
useReducer
useCallback
useMemo
useRef
useImperativeMethods
useMutationEffect
useLayoutEffect

怎么写自定义的Effect Hooks

为什么要自己去写一个Effect Hooks? 这样我们才能把可以复用的逻辑抽离出来，变成一个个可以随意插拔的“插销”，哪个组件要用来，我就插进哪个组件里，so easy！看一个完整的例子，你就明白了。

比如我们可以把上面写的FriendStatus组件中判断朋友是否在线的功能抽出来，新建一个useFriendStatus的hook专门用来判断某个id是否在线。

function useFriendStatus(friendId) {
  const [ isOnline, setIsOnline ] = useState(null);
  function handleStattusChange(status) {
    setIsOnline(status.isOnline);
  };
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
    return () => {
      ChatAPI.unsubscribeFriendStatus(props.friend.id, handleStattusChange);
    }
  });
  return isOnline;
}

这时候FriendStatus组件就可以简写为：

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);
  if(isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

简直Perfect！假如这个时候我们又有一个朋友列表也需要显示是否在线的信息：

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{color: isOnline ? 'green' : 'black'}}>
      {this.props.friend.name}
    </li>
  );
}

简直Fabulous!

React 新特性React Hooks

任我行

引用和评论

vue Elemaent 表单校验

一些react使用小技巧（上）

一些react使用小技巧（中）

一些react使用小技巧（下）

深入浅出React中的refs

这个前端神器，竟让滴滴、美团都爱不释手？！

ReactNative开发笔记（持续更新...）