React-Hook的使用

函数式组件在不编写class的情况下使用state以及其他的React特性（比如生命周期）

一、Hooks结合函数式组件使用（useState）

通过一个计数器案例，来对比一下class组件和函数式组件结合hooks的对比：
1、class组件实现：

import React, { PureComponent } from 'react';

class HookTest extends PureComponent {

  constructor(props){
    super(props)

    this.state = {
      count: 0
    }
    this.addCount = this.addCount.bind(this)
  }
  
  render() {
    return (
      <div>
        <h2>{this.state.count}</h2>
        <button onClick={this.addCount}>增加</button>
      </div>
    );
  }

  addCount(){
    this.setState({
      count: this.state.count+1
    })
  }
}

export default HookTest;

2、函数式组件结合hooks使用：

import React, { useState } from 'react';

function HookTest(){

 const [count, setCount] = useState(0)   // ES6结构

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={()=>setCount(count+2)}>增加</button>
    </div>
  )
}

export default HookTest

通过上面对比发现，函数式组件结合hooks使用让代码看起来更加整齐。
解析：const [count, setCount] = useState(0)
1、其中count是参数，setCount是设置参数count的函数；
2、useState是一个函数，返回一个数组，可结构成一个参数和设置参数的函数，有一个唯一的参数，设置的是参数count的初始值。

3、在一个函数组件中定义多个变量和复杂变量（数组、对象）：

import React, { useState } from 'react';

function HookTest(){

  const [count, setCount]     = useState(0)   // ES6结构
  const [list, setList]       = useState(['A', 'B', 'C'])
  const [person, setPerson]   = useState({'name': 'Jack'})

  return (
    <div>
      <h2>{count}</h2>
      <h2>{person.name}-{person.age}</h2>
      <ul>
        {
          list.map((item, index) => {
            return (
              <li key={index}>{item}</li>
            )
          })
        }
      </ul>
      <button onClick={()=>setCount(count+2)}>增加数字</button>
      <button onClick={()=>setList([...list, 'D'])}>修改列表</button>
      <button onClick={()=>setPerson({...person, name: 'Lucy', age: 19})}>修改对象</button>
    </div>
  )
}

export default HookTest

二、 Effect Hook的使用（useEffect）

1、Effect Hook 类似于class中生命周期的功能

function Index(){

  // useEffect页面初始化使用，相当于componentDidMount
  useEffect(() => {
    console.log('index in');

    // return在页面销毁时候调用，相当于componentWillUnmount
    return ()=>{
      console.log('index out'); 
    }
  }, [])
  return <h2>index page</h2>
}

2、使用多个Effect
使用Hook的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题：
比如网络请求、事件监听、手动修改DOM，这些往往都会放在componentDidMount中；
使用Effect Hook，我们可以将它们分离到不同的useEffect中：

import React, { useEffect } from 'react';

export default function MultiUseEffect() {
 useEffect(() => {
   console.log("网络请求");
 });

 useEffect(() => {
   console.log("修改DOM");
 })

 useEffect(() => {
   console.log("事件监听");

   return () => {
     console.log("取消监听");
   }
 })

 return (
   <div>
     <h2>MultiUseEffect</h2>
   </div>
 )
}

Hook 允许我们按照代码的用途分离它们， 而不是像生命周期函数那样：
React 将按照 effect 声明的顺序依次调用组件中的每一个 effect；

3、 Effect性能优化
默认情况下，useEffect的回调函数会在每次渲染时都重新执行，但是这会导致两个问题：
某些代码我们只是希望执行一次即可，类似于componentDidMount和componentWillUnmount中完成的事情；（比如网络请求、订阅和取消订阅）；
另外，多次执行也会导致一定的性能问题；
我们如何决定useEffect在什么时候应该执行和什么时候不应该执行呢？
useEffect实际上有两个参数：
参数一：执行的回调函数；
参数二：该useEffect在哪些state发生变化时，才重新执行；（受谁的影响）
我们来看下面的一个案例：
在这个案例中，我们修改show的值，是不会让useEffect重新被执行的；

import React, { useState, useEffect } from 'react';

export default function EffectPerformance() {
  const [count, setCount] = useState(0);
  const [show, setShow] = useState(true);

  useEffect(() => {
    console.log("修改DOM");
  }, [count])

  return (
    <div>
      <h2>当前计数: {count}</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
      <button onClick={e => setShow(!show)}>切换</button>
    </div>
  )
}

但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组 []

三、Context Hook的使用（useContext）

Context Hook可以让我们通过Hook来直接获取某个Context的值：

const value = useContext(MyContext);

在App.js中使用Context:

import React, { createContext } from 'react';

import ContextHook from './04_useContext使用/01_ContextHook';

export const UserContext = createContext();
export const ThemeContext = createContext();

export default function App() {
  return (
    <div>
      <UserContext.Provider value={{name: "why", age: 18}}>
        <ThemeContext.Provider value={{color: "red", fontSize: "20px"}}>
          <ContextHook/>
        </ThemeContext.Provider>
      </UserContext.Provider>
    </div>
  )
}

在对应的函数式组件中使用Context Hook：

import React, { useContext } from 'react'
import { UserContext, ThemeContext } from '../App'

export default function ContextHook() {
  const user = useContext(UserContext);
  const theme = useContext(ThemeContext);
  console.log(user);
  console.log(theme);

  return (
    <div>
      ContextHook
    </div>
  )
}

四、关于useReducer Hook的使用 （useReducer）

useReducer仅仅是useState的一种替代方案：

  • 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
  • 或者这次修改的state需要依赖之前的state时，也可以使用；

单独创建一个reducer/counter.js文件:

export function counterReducer(state, action) {
  switch(action.type) {
    case "increment":
      return {...state, counter: state.counter + 1}
    case "decrement":
      return {...state, counter: state.counter - 1}
    default:
      return state;
  }
}

home.js文件:

import React, { useReducer } from 'react'
import { counterReducer } from '../reducer/counter'

export default function Home() {
  const [state, dispatch] = useReducer(counterReducer, {counter: 100});

  return (
    <div>
      <h2>当前计数: {state.counter}</h2>
      <button onClick={e => dispatch({type: "increment"})}>+1</button>
      <button onClick={e => dispatch({type: "decrement"})}>-1</button>
    </div>
  )
}

profile.js文件（创建另外一个profile.js也使用这个reducer函数）:

import React, { useReducer } from 'react'
import { counterReducer } from '../reducer/counter'

export default function Profile() {
  const [state, dispatch] = useReducer(counterReducer, {counter: 0});

  return (
    <div>
      <h2>当前计数: {state.counter}</h2>
      <button onClick={e => dispatch({type: "increment"})}>+1</button>
      <button onClick={e => dispatch({type: "decrement"})}>-1</button>
    </div>
  )
}

通过执行可以发现，home.js文件和profile.js文件在使用的时候，counter并不会共享，也就是说home文件中修改counter的值不会影响profile中counter的值，同理修改profile文件中counter也是。
所以，useReducer只是useState的一种替代品，将复杂的useState拆分到不同的文件中，并不能替代Redux。

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