浅见React hook其一

558 阅读8分钟

1.hook是什么?

Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。

我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面的优势:

  • class组件可以定义自己的state,用来保存组件自己内部的状态;
  • 函数式组件不可以,因为函数每次调用都会产生新的临时变量;
  • class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻辑;
  • 比如在componentDidMount中发送网络请求,并且该生命周期函数只会执行一次;
  • 函数式组件在学习hooks之前,如果在函数中发送网络请求,意味着每次重新渲染都会重新发送一次网络请求;
  • class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等;
  • 函数式组件在重新渲染时,整个函数都会被执行,似乎没有什么地方可以只让它们调用一次; 简单总结一下hooks:
  1. 它可以让我们在不编写class的情况下使用state以及其他的React特性;
  2. 但是我们可以由此延伸出非常多的用法,来让我们前面所提到的问题得到解决;
  3. Hook的使用场景:
  4. Hook的出现基本可以代替我们之前所有使用class组件的地方(除了一些非常不常用的场景);
  5. 但是如果是一个旧的项目,你并不需要直接将所有的代码重构为Hooks,因为它完全向下兼容,你可以渐进式的来使用它;
  6. Hook只能在函数组件中使用,不能在类组件,或者函数组件之外的地方使用;

2.useState

2.1 useState

  • useState会帮助我们定义一个 state变量,useState 是一种新方法,它与 class 里面的 this.state 提供的功能完全相同。一般来说,在函数退出后变量就会”消失”,而 state 中的变量会被 React 保留。
  • useState接受唯一一个参数,在第一次组件被调用时使用来作为初始化值。(如果没有传递参数,那么初始化值为undefined)

2.2 useState用法

  • (1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
  • (2). 语法: const [xxx, setXxx] = React.useState(initValue)
  • (3). useState()说明:
 参数: 第一次初始化指定的值在内部作缓存
 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
  • (4). setXxx()2种写法:
 setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
 setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值
import React from "react"
 const Demo=()=>{
    //给state赋初始值
    const [count,setCount]=React.useState(0)
    const [changeName,setName]=React.useState("ws")
    //这里是修改state
    const clickHandle=()=>{
        setCount(count=>count+1)
    }
    const changeHandle=()=>{
        setName("jack")
    }
    return (
        <div>
        <h1>这个数据是{count}</h1>
        <h2>我的名字是{changeName}</h2>
        <button onClick={clickHandle}>加一</button>
        <button onClick={changeHandle}>点我改名</button>
    </div>
    )
}
export default Demo

2.3 useState原理

2.3.1 初始化

把数据放在一个全局数组中,确定一个游标,用于记录数据的位置

1602503482622-d317571c-02e5-4477-99ab-3f4c34d217fd[2].png

2.3.2 第一次渲染

调用useState时,第一次渲染,会将一个set函数放入setters数组中,并且把初始state放入到state数组中.

1602503682578-b5df1657-76ab-4704-b68f-ddc0b75cccc4[1].jpeg

2.3.3 后续渲染

每一次重新渲染,光标都会重新设为0,然后从对应的数组中读取状态和set函数 1602503787191-b3b60dd0-435b-4e3a-94fa-9395bef84c3e[1].jpeg

2.3.4 事件处理

每次调用set函数时,set函数将会修改state数组中对应的状态值,这种对应的关系是通过cursor光标来确定的

1602503851139-1b2245d4-c6d4-47a0-b5cf-763a6c0265be[1].jpeg

3.useRef

  • useRef可以保存变量,dom以及事件
  • useRef(和React.creatRef()生成的有点类似)
  • useRef 返回一个可变的ref对象-----书写更加简洁
  • 返回的ref对象在组件的整个生命周期内保持不变
  • ref对象的.current属性设置为相应的DOM节点---------和之前的ref一样的
  • 当ref对象内容发生变化时,useRef并不会通知你--------dom对象发生变化后,并不会实时更新ref
  • 变更.current属性不会引发组件重新渲染--------修改current属性,dom不会更新任何
import React, {useRef} from 'react'
const  UseRefFunc=()=>{
    const inputRef=useRef(null)
    const handle=()=>{
      console.log(inputRef.current.value);
    }
    return (
        <div>
            <input type="text"  ref={inputRef}/>
            <button onClick={handle}>提交</button>
        </div>
    )
}
export default UseRefFunc

4.Effect

目前我们已经通过hook在函数式组件中定义state,那么类似于生命周期这些呢?

  • Effect Hook 可以让你来完成一些类似于class中生命周期的功能;
  • 事实上,类似于网络请求、手动更新DOM、一些事件的监听,都是React更新DOM的一些副作用(Side Effects);
  • 所以对于完成这些功能的Hook被称之为 Effect Hook;

4.1 Effect基本使用

假如我们现在有一个需求:页面的title总是显示counter的数字 使用class组件如何实现呢?

  • 我们会发现 document.title 的设置必须在两个生命周期中完成;
  • 这是因为React的class组件并没有给我们提供一个统一的生命周期函数,可以让无论是否是第一次渲染都会执行的生命周期函数;
//类组件
import React, { PureComponent } from 'react'

export default class CounterTitle01 extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  componentDidMount() {
    document.title = `当前计数: ${this.state.counter}`
  }

  componentDidUpdate() {
    document.title = `当前计数: ${this.state.counter}`
  }

  render() {
    console.log("111");
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
        <button onClick={e => this.decrement()}>-1</button>
      </div>
    )
  }

  increment() {
    this.setState({counter: this.state.counter + 1});
  }

  decrement() {
    this.setState({counter: this.state.counter - 1});
  }
}

在函数组件中使用Effect

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

export default function CounterTitle02() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `当前计数: ${count}`;
  })

  return (
    <div>
      <h2>当前计数: {count}</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
      <button onClick={e => setCount(count - 1)}>-1</button>
    </div>
  )
}

4.2清除Effect

在class组件的编写过程中,某些副作用的代码,我们需要在componentWillUnmount中进行清除:

  • 比如我们之前的事件总线或Redux中手动调用subscribe;
  • 都需要在componentWillUnmount有对应的取消订阅;
  • Effect Hook通过什么方式来模拟componentWillUnmount呢? useEffect传入的回调函数A本身可以有一个返回值,这个返回值是另外一个回调函数B:
type EffectCallback = () => (void | (() => void | undefined));

我们可以这样来编写Effect Hook:

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

export default function EffectHookClear() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `当前计数: ${count}`;
    console.log("我是王三十五苏学信息");

    return () => {
      console.log("D我是王形形色色苏x'x1");
    }
  })

  return (
    <div>
      <h2>当前计数: {count}</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
      <button onClick={e => setCount(count - 1)}>-1</button>
    </div>
  )
}

为什么要在 effect 中返回一个函数?

  • 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数;
  • 如此可以将添加和移除订阅的逻辑放在一起;
  • 它们都属于 effect 的一部分; React 何时清除 effect?
  • React 会在组件更新和卸载的时候执行清除操作;
  • 正如之前学到的,effect 在每次渲染的时候都会执行;

4.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>
  )
}

但是,如果一个函数我们不希望依赖任何的内容时,也可以传入一个空的数组 []: 那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了;

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

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

5.forwardRef(ref转发)

将父组件的ref转发给子组件,从而让父组件的ref引用子组件中的dom元素

  • 1.需要在子组件中引入formwardRef,将需要转发的子元素标签的ref赋值给传递进来的ref
  • 2.在父组件中引入子组件,将ref绑定一个useref
//father.jsx
import React, { useRef } from 'react'
import Son from "../Son"

const Father=()=>{
const inputRef=useRef()
const clickHandle=()=>{
      console.log(inputRef.current.value)
}
return(
    <div>
        父组件
        <Son ref={inputRef}></Son>
        <button onClick={clickHandle}>点击转发</button>
    </div>
)
}
export default Father
//son.jsx
import React, {forwardRef } from 'react'
const Son=forwardRef((props,ref)=>{
     return (
      <div>
          子组件
          <input type="text" ref={ref}/>
      </div>
     )
})
export default Son

6.Context Hook

在之前的开发中,我们要在组件中使用共享的Context有两种方式:

  • 类组件可以通过 类名.contextType = MyContext方式,在类中获取context;
  • 多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context; 但是多个Context共享时的方式会存在大量的嵌套:
  • Context Hook允许我们通过Hook来直接获取某个Context的值

6.1 基本使用

//App.js
import React, { createContext } from 'react';
import ContextHook from './components/Context/index';
import 'antd/dist/antd.less'
export const UserContext = createContext();
export const ThemeContext = createContext();
function App() {

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

export default App;
//Context.jsx
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>
  )
  }

注意事项:当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重新渲染,并使用最新传递给 MyContext provider 的 context value 值。

7useImperativeHandle

//a.jsx
import React, {  useRef } from 'react';
import B from "./B"
const A=()=>{
    const refContainer = useRef(null);
    const changeInput = () => {
      refContainer.current && refContainer.current.focus()
    }
    const talk = () => {
      refContainer.current && refContainer.current.talk()
    }
  
    return <div >
      <button onClick={changeInput}>changeInput</button>
      <button onClick={talk}>talk</button>
      <B ref={refContainer}></B>
    </div>
}

export default A
//b.jsx
import React,{forwardRef,useRef,useImperativeHandle } from 'react'
const B=forwardRef((props,ref)=>{
    const inputRef=useRef(null)
    useImperativeHandle(ref,()=>({
        focus: () => {
            inputRef.current && inputRef.current.focus();
          },
          talk: () => {
              console.log('hello, world!');
          }
    }))
    return (
        <input ref={inputRef}></input>
    )
})
export default B