react 16.8.2 最新特性 react-hooks 介绍与应用。

REACT与函数式编程

从发布最初，react就高举函数式编程的大旗。但最最核心的组件化确是用ES6的伪造类Class完成的。开发过程中明显的感觉得到，这是面向对象的编程风格。现在好了，开发的趋势是组件可以不用class完成，而是改用函数组件来编写我们的应用了。

Counter组件重写

套用程墨菊苣在知乎上的例子，以前我们的class类组件的counter，就可以改写成下面的例子

const Counter = () => {
  const [count,setCount] = useState(0);
  return (
    <div>
      <div>{count}</div>
      <button onClick={()=>setCount(count + 1)}>+</button>
      <button onClick={()=>setCount(count - 1)}>-</button>
    </div>
  );
};

hooks的出现，让redux 和 mobx 这样的第三方状态管理工具可有可无了

hooks的useState无论调用多少次，无论在哪个组件如何调用，互相之间都是独立的。如何独立的呢？react要求useState只能在react组件函数一级的scope里，不能放在if-else里，不能放在循环体里，因为react要根据useState的调用顺序来管理状态。

const [ foo,updateFoo] = useState("bar");

上面的代码，useState返回的结果其实是一个俩元素的数据，第一个元素是状态，相当于之前的this.state.foo，第二个元素是改变这个状态的函数，相当于之前的this.setState(...)。
useState毫无「状态名」的概念，状态名和改变状态的函数，都是我们自己的代码确定的，上面的代码完全可以这么写。

const [ so,whatever] = useState("bar");

然后so变量就是bar了，whatever就是改变so的函数了。
因为useState没有状态名的概念，所以完全靠调用顺序[记住]哪个状态对应哪个变量。
可以想象，如下面这样编写代码，肯定玩完。

const Counter = ()=>{
  if(condition){
    const [count,setCount] = userState(0);
    const [foo,updateFoo] = useState("bar");
}else{
    const [foo,updateFoo] = useState("bar");
    const [count,setCount] = useState(0);
  }
return(
  <div>
      <div>{count}</div>
       <button onClikc={()=>setCount(count + 1)}>+</button>
       <button onClikc={()=>setCount(count - 1)}>-</button>
  </div>
  );
};

上面两个useState的调用顺秀随着condition变化,这么不行。

为什么引入hooks

为了解决react开发中出现的各种关于组件的问题

  1. 难以重用或共享组件中关于状态(state)相关的逻辑.
  2. 逻辑复杂的组件难以开发和维护，当我们的组件需要处理多个复杂的不相关的local state的时候每个生命周期函数中可能会包含着各种互不相关的逻辑在里面。
  3. 类组件中的this增加了学习成本，类组件在基于现有工具的优化上存在诸多问题。
  4. 由于业务变动，函数组件不得不改为类组件等。

为了进一步了解hooks，我们先来了解一下hooks的用法。

快速了解react hooks的使用

hooks让函数组件拥有了类组件的特性，比如local state(状态),lifeCircle(生命周期),而且还解决了上面提到的一系列问题。下面来一一指出。
首先是hooks的使用，这里主要讲2个hooks:useState和useEffect。

import {useState,useEffect} from "react";
function example(){
  // count是名 setCount是一个函数 他们随便定义成什么名字都可以
  const [count,setCount] = useState(0);
  //useEffect参数是一个函数
  useEffect(()=>{
    document.title = `You clicked ${count} times`;
  });
  return (
    <p>{count}</p>
    <button onClick={()=>setCount(count + 1)}>Click Me</button>
  )
}

useState

useState这个方法可以给我们的函数组件带来local state，让函数组件拥有状态的概念，它接收一个初始的state值，返回一对变量。

const [count,setCount] = useState(0);
//等价于
var count = useState(0)[0]; //该state
var setCount = useState(0)[1];//修改state的方法

useEffect

useEffect可以利用我们组件中的local state 进行一些带有副作用的操作

//在useEffect里面可以获取到local state
useEffect(()=>{
  document.title = `You clicked ${count} times`;
});

useEffect里面还可以通过传入第二个参数来决定是否执行里面的操作来避免一些不必要的性能损失，只要第二个参数数组中的成员的值没有改变，就会跳过此次执行，如果传入一个空数组，[]，那么该effect只会在组件mount和unmount时期执行。

useEffect(()=>{
  document.title = `You clicked ${count} times`;
},[count]);

useEffect中还可以通过让函数返回一个函数来进行一些清理操作(clean up),比如取消订阅等。

useEffect(() => {
  api.subscribe(theId);
  return () => {
      api.unsubscribe(theId)    //clean up
  }
});

useEffect什么时候执行呢?它会在组件mount和unmount以及每次重新渲染的时候都会执行，也就是会在componentWillMount,componentDidMount,componentDidUpdata这3个时期执行。
清理函数(clean up)什么时候执行呢？其在前一次effect执行后，下一次effect将要执行前，以及Unmount时期执行。

注意事项

我们只能在 函数组件 中使用 Hooks，我们也可以在一个组件中使用多组 Hooks。比如：

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() =>{
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    API.subscribe(props.friend.id);
    return () => {
      API.unsubscribe(props.friend.id);
    };
  });

  return isOnline
}

值得注意的是，我们只能在顶层代码（top level）中调用hooks，不能再循环或者判断语句中调用，这样是为了让我们的hooks在每次渲染的时候都会按照相同的顺序调用，因为这里有一个跟关键词的问题，那就是useState需要依赖参照第一次渲染的调用顺序来匹配对应的state，否则，useState会无法正确返回其对应的state。

hooks解决的问题。

知道了 Hooks 基本使用后，我们就可以来了解 Hooks 是怎么解决 react 长期存在的问题的。

  1. 如何解决 状态有关的逻辑(stateful logic) 的重用和共享问题
    过去对于类似问题的解决方案主要有两个：
  • Render Props 通过props接受一个返回react element的函数，来动态决定自己要渲染的结果；
<DataProvider render=>(
  <h1>Hello,{data.target}</h1>
)}>
  • 还有就是Higher-Order Components 高阶组件，以一种类似 工厂模式 的方式去生产出具有相同或类似逻辑的组件。
function getComponent(WrappedComponent) {

  return class extends React.Component {
    constructor(props) {
      super(props);
    }
    componentDidMount() {
      // doSomething
    }
    componentWillUnmount() {
      // doSomething
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

但无论是哪种方法都会造成组件数量增多，还有组件树结构的更改，而且还有可能出现嵌套地狱。现在custom hooks可以解决这个问题。

custom hooks

custom hooks并不是一个api，而是一个规则。具体实现就是通过一个函数来封装跟状态有关的逻辑，将这些逻辑从组件中抽离出来,在这个函数中我们可以使用其他的hooks，也可以单独进行测试，甚至将他贡献给社区。

import { useState, useEffect } from 'react';

function useCount() {
  const [count, setCount] = useState(0);
  useEffect(() =>{
    document.title = `You clicked ${count} times`;
  });
  
  return count
}

比如上面的一个例子，他就是一个custom hooks,提取了对count的操作。这里需要遵循一个约定，命名要用use *，这是为了方便我区分，利于我们维护。可以看到它其实就是一个函数，我们可以在现有的所有其他组件引用他。

function CountStatus(){
  // 比如这里的useCount 就是用use命名。
  const count = useCount();
  return count;
}

这里的核心概念就是将逻辑提取出来封装到custom hooks里，然后可以在任何其他组件中共享这部分逻辑。也可以贡献给社区。所以我们可以预见，将来会有更多充满想象力的custom hooks出现，极大地提高我们的开发效率。

hooks 具有复杂逻辑的组件的开发和维护

我们的组件可能会随着开发的进行变得越来越复杂，要处理越来越多的 local State，那么在组件的生命周期函数中就会充斥着各种互不相关的逻辑，这里需要引入官方的比较复杂的例子，先看基于以前类组件的情况：

class FriendStatusWithCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      count: 0, 
      isOnline: null 
    };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }
  // ...

经过 Hook 改造后：

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  // ...
}

状态和相关的处理逻辑可以按照功能来划分，不必散落在各个生命周期之中，大大降低了开发和维护的难度。除了这几个hooks还有其他几个hooks，在此继续了解 Hooks API Reference。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,968评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,601评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,220评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,416评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,425评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,144评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,432评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,088评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,586评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,783评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,343评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2赞 345