关于javascript:一文看懂React-Hooks

241次阅读

共计 13895 个字符，预计需要花费 35 分钟才能阅读完成。

一、Hook 简介

React Hooks 是从 React 16.8 版本推出的新个性，目标是解决 React 的状态共享以及组件生命周期管理混乱的问题。React Hooks 的呈现标记着，React 不会再存在无状态组件的状况，React 将只有类组件和函数组件的概念。

家喻户晓，React 利用开发中，组件的状态共享是一件很麻烦的事件，而 React Hook 只共享数据处理逻辑，并不会共享数据自身，因而也就不须要关怀数据与生命周期绑定的问题。如下所示，是应用类组件实现计数器的示例。

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1})}>
          Click me
        </button>
      </div>
    );
  }
}

能够发现，类组件须要本人申明状态，并编写操作状态的办法，并且还须要保护状态的生命周期，显得特地麻烦。如果应用 React Hook 提供的 State Hook 来解决状态，那么代码将会简洁许多，重构后的代码如下所示。

import React, {useState} from 'react';

function Example() {const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

能够看到，Example 从一个类组件变成了一个函数组件，此函数组件领有本人的状态，并且不须要调用 setState() 办法也可更新本人的状态。之所以能够如此操作，是因为类组件应用了 useState 函数。

二、根底 Hook

2.1 useState

useState 函数是 React 自带的一个 Hook 函数，而 Hook 函数领有 React 状态和生命周期治理的能力。
能够看到，useState 函数的入参只有一个，就是 state 的初始值，这个初始值能够是数字、字符串、对象，甚至是一个函数，如下所示。

function Example (props) {const [ count, setCount] = useState(() => {return props.count || 0})
    return (
      <div>
        You clicked : {count}
        <button onClick={() => { setCount(count + 1)}}>
          Click me
        </button>
      </div>
      )
  }

并且，当入参是一个函数时，此函数只会在类组件初始渲染的时候才会被执行一次。
如果须要同时对一个 state 对象进行操作，那么能够间接应用函数进行操作，该函数会接管 state 对象的值，而后执行更新操作，如下所示。

function Example() {const [count, setCount] = useState(0);

  function handleClick() {setCount(count + 1)
  }

  function handleClickFn() {setCount((prevCount) => {return prevCount -1})
  }

  return (
      <>
        You clicked: {count}
        <button onClick={handleClick}>+</button>
        <button onClick={handleClickFn}>-</button>
      </>
  );
}

在下面的代码中，handleClick 和 handleClickFn 都是更新的最新的状态值。并且操作同一个状态对象值的时候，为了节约性能，React 会把屡次状态更新进行合并，并一次性的更新状态对象的值。
在 React 利用开发中，当某个组件的状态发生变化时，它会以该组件为根，从新渲染整个组件树，如下所示。

function Child({onButtonClick, data}) {
  return (<button onClick={onButtonClick}>{data.number}</button>
  )
}

function Example () {const [number, setNumber] = useState(0)
  const [name, setName] = useState('hello')  
  const addClick = () => setNumber(number + 1)
  const data = {number}
  return (
    <div>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <Child onButtonClick={addClick} data={data} />
    </div>
  )
}

在下面的代码中，子组件援用 number 对象的数据，当父组件的 name 对象的数据发生变化时，尽管子组件没有产生任何变动，它也会执行重绘操作。在我的项目开发中，为了防止这种不必要的子组件反复渲染，须要应用 useMemo 和 useCallback 进行包裹，如下所示。

import {memo, useCallback, useMemo, useState} from "react";

function Child({onButtonClick, data}) {
  return (<button onClick={onButtonClick}>{data.number}</button>
  )
}

Child = memo(Child)

function Example () {const [number, setNumber] = useState(0)
  const [name, setName] = useState('hello') 
  const addClick = useCallback(() => setNumber(number + 1), [number])
  const data = useMemo(() => ({ number}), [number])
  return (
    <div>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <Child onButtonClick={addClick} data={data} />
    </div>
  )
}

其中，useMemo 和 useCallback 是 React Hook 提供的两个 API，次要用于缓存数据、优化晋升利用性能。它俩的共同点是，只有当依赖的数据发生变化时，才会调用回调函数去从新计算结果，不同点如下。

  • useMemo：缓存的后果是回调函数返回的值。
  • useCallback：缓存的是函数。因为函数式组件每当 state 发生变化，就会触发整个组件更新，当应用 useCallback 之后，一些没有必要更新的函数组件就会缓存起来。

在下面的示例中，咱们把函数对象和依赖项数组作为参数传入 useMemo，因为应用了 useMemo，所以只有当某个依赖项发生变化时才会从新计算缓存的值。通过 useMemo 和 useCallback 的优化解决后，能够无效防止每次渲染带来的性能开销。

2.2 useEffect

失常状况下，在 React 的函数组件的函数体中，网络申请、模块订阅以及 DOM 操作都属于副作用的领域，官网不倡议开发者在函数体中写这些副作用代码的，而 Effect Hook 就是专门用来解决这些副作用的。上面是应用类组件实现计数器的例子，副作用代码都写在 componentDidMount 和 componentDidUpdate 生命周期函数中，如下所示。

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

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

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1})}>
          Click me
        </button>
      </div>
    );
  }
}

能够看到，componentDidMount 和 componentDidUpdate 两个生命周期函数中的代码是一样的。之所以呈现同样的代码，是因为很多状况下，咱们心愿在组件加载和更新时执行同样的操作。从概念上说，咱们心愿能够对它进行合并解决，遗憾的是类组件病没有提供这样的办法。不过，当初应用 Effect Hook 就能够防止这种问题，如下所示。

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

function Example() {const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

事实上，useEffect 只会在每次 DOM 渲染后执行，因而不会阻塞页面的渲染。并且，useEffect 同时具备 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期函数的执行机会。同时，咱们还能够应用 useEffect 在组件外部间接拜访 state 变量或是 props，因而能够在 useEffect 执行函数值的更新操作。
在类组件中，通常会在 componentDidMount 生命周期中设置订阅音讯，并在 componentWillUnmount 生命周期中革除。例如，有一个 ChatAPI 模块，用来订阅好友的在线状态，如下所示。

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

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

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

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

  render() {if (this.state.isOnline === null) {return 'Loading...';}
    return this.state.isOnline ? 'Online' : 'Offline';
  }
}

能够发现，componentDidMount 和 componentWillUnmount 是绝对应的，即在 componentDidMount 生命周期中的设置须要在 componentWillUnmount 生命周期中进行解除。不过，手动解决模块订阅是相当麻烦的，如果应用 Effect Hook 进行解决就会简略许多，如下所示。

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

function FriendStatus(props) {const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    
    return function cleanup() {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {return 'Loading...';}
  return isOnline ? 'Online' : 'Offline';
}

事实上，每个 Effect 都会返回一个革除函数，当 useEffect 的返回值是一个函数的时候，React 会在组件卸载的时候执行一遍革除操作。useEffect 会在每次渲染后执行，但有时候咱们心愿只有在 state 或 props 扭转的状况下才执行渲染，上面是类组件的写法。

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

如果应用 React Hook，只须要传入第二个参数即可，如下所示。

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

能够发现，第二个参数是一个数组，能够将 Effect 用到的所有 props 和 state 都传进去。如果只须要在组件挂载和卸载时才执行，那么第二个参数能够传一个空数组。

除了 useEffect 外，useLayoutEffect 也能够执行副作用和清理操作。不同之处在于，useEffect 会在浏览器渲染实现后执行，而 useLayoutEffect 是在浏览器渲染前执行。

2.3 useContext

在类组件中，组件之间的数据共享是通过属性 props 来实现的。在函数组件中，因为没有构造函数 constructor 和属性 props 的概念，组件之间传递数据只能通过 useContext 来实现。
useContext 是 React Hook 提供的跨级组件数据传递的一种形式，能够很不便的去订阅上下文的扭转，并在适合的时候从新渲染组件。useContext 的应用形式如下。

const value = useContext(MyContext);

能够看到，useContext 接管一个上下文对象 context，并返回该上下文对象的以后值。以后上下文对象的值由下层组件中距离以后组件最近的 数据提供者决定。
useContext 的次要作用就是实现组件之间的数据传递。首先，新建一个命名 Example.js 文件，并增加如下代码。

import {useState,createContext} from "react";

const CountContext = createContext()

function Example(){const [ count , setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
            <CountContext.Provider value={count}>
            </CountContext.Provider>
        </div>
    )
}

在下面的代码中，咱们把 count 变量应用 Provider 包裹起来，即容许它实现跨层级组件值的传递，当父组件的 count 变量发生变化时子组件也会发生变化。
有了上下文变量之后，接下来就能够应用 useContext 接管上下文变量的值了。在 Example.js 文件中新建一个 Counter 组件，用来显示上下文对象 count 变量的值，代码如下。

function Counter(){const count = useContext(CountContext)  
    return (<h2>{count}</h2>)
}

而后，咱们还须要在 <CountContext.Provider> 标签中引入 Counter 组件，如下所示。

<CountContext.Provider value={count}>
    <Counter/>
</CountContext.Provider>

能够发现，应用 useContext 形式在组件之间传递值时，须要应用 Provider 包裹须要传递的变量。

三 其余 Hook

3.1 useReducer

家喻户晓，JavaScript 的 Redux 状态治理框架由 Action、Reducer 和 Store 三个对象形成，而 Reducer 是惟一能够更新组件中 State 的路径。Reducer 实质上是一个函数，它接管两个参数，状态和管制业务逻辑的判断参数，如下所示。

function countReducer(state, action) {switch(action.type) {
        case 'add':
            return state + 1;
        case 'sub':
            return state - 1;
        default:
            return state;
    }
}

useReducer 是 React Hooks 提供的一个函数，次要用来在某些简单的场景中替换 useState。例如，蕴含简单逻辑的 state 且蕴含多个子值，或者前面的 state 依赖于后面的 state 等。useReducer 的语法格局如下。

const [state, dispatch] = useReducer(reducer, initialArg, init);

能够发现，useReducer 的应用形式与 Redux 状态框架时十分类似的，它接管一个形如 (state, action) => newState 的 Reducer，并返回以后 state 以及 dispatch 办法。例如，上面是应用 useReducer 实现计数器的代码。

const initialState = {count: 0};

function reducer(state, action) {switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();}
}

function Counter() {const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

有时候，须要惰性地创立初始 state，那么只须要将初始化函数作为 useReducer 的第三个参数传入即可，如下所示。

function init(initialCount) {return {count: initialCount};
}

function reducer(state, action) {…. // 省略其余代码}

function Example({initialCount}) {const [state, dispatch] = useReducer(reducer, initialCount, init);
    return (…  // 省略其余代码);
}

有时候，Reducer Hook 的返回值与以后 state 的值是雷同的，此时须要跳过子组件的渲染及副作用的执行。
须要留神的是，因为 React 不会对组件树的深层节点进行不必要的渲染，所以不用放心跳过渲染后再次渲染该组件。如果为了防止在渲染期间执行高开销的计算，能够应用 useMemo 进行优化。

3.2 useMemo

在类组件中，每一次状态的更新都会触发组件树的从新绘制，而从新绘制必然会带来不必要的性能开销。同样，在函数组件中，为了防止 useState 每次渲染时带来的高开销计算，React Hook 提供了 useMemo 函数。

useMemo 之所以可能带来性能上的晋升，是因为在依赖不变的状况下，useMemo 会返回雷同的援用，防止子组件进行无意义的反复渲染。例如，上面是一个一般的 useState 的应用示例。

function Example() {const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
    
    function expensive() {
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {sum += i;}
        return sum;
    }

    return (
        <>
            {count}：{expensive()}
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </>
    );
}

在下面的示例中，无论是批改 count 还是 val 的值，都会触发 expensive 办法的执行。不过，因为 expensive 办法的执行只依赖于 count 的值，而在批改 val 值的时候是没有必要再次计算的。所以，为了防止这种不必要的计算，能够应用 useMemo 优化下面的代码，如下所示。

function Example() {const [count, setCount] = useState(1);
    const [val, setValue] = useState('');

    const expensive = useMemo(() => {
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {sum += i;}
        return sum;
    }, [count]);

    return (
        <>
            {count}：{expensive()}
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </>
    );
}

在下面的代码中，咱们应用 useMemo 来解决耗时计算，而后将计算结果传递给 count 并触发状态刷新。通过 useMemo 解决后，count 只会在扭转的时候才会触发耗时计算执行状态刷新，而批改 val 则不会触发刷新。

3.3 useCallback

和 useMemo 一样，useCallback 也是用来做性能优化的，即只有当依赖的数据发生变化时，才会调用回调函数从新计算结果。不同之处在于，useMemo 次要用于缓存计算结果的值，而 useCallback 缓存的是函数。useCallback 的语法格局如下。
const fnA = useCallback(fnB, [a])
在下面的语句中，useCallback 会将传递给它的函数 fnB 返回，并且会将函数 fnB 的运行后果进行缓存。并且，当依赖 a 变更时还会返回新的函数。因为返回的是函数，无奈判断返回的函数是否产生变更，所以须要借助 ES6 新增的数据类型 Set 来辅助判断，如下所示。

function Example() {const [count, setCount] = useState(1);
    const [val, setVal] = useState('');

    const callback = useCallback(() => {}, [count]);
    set.add(callback);

    return (
        <div>
            {count}:{set.size}
            <div>
                <button onClick={() => setCount(count + 1)}>+</button>
                <input value={val} onChange={e => setVal(e.target.value)}/>
            </div>
        </div>
    );
}

能够看到，每次批改 count 时 set.size 就会加 1，而 useCallback 依赖变量 count，所以每次 count 产生变更时就会返回一个新的函数。而 val 产生变更时 set.size 则不会发生变化，阐明它返回的是缓存的旧函数。
再看另外一个场景：有一个蕴含子组件的父组件，子组件会接管一个函数作为 props。通常来说，如果父组件产生更新，那么子组件也会执行更新，但在大多数场景下，子组件的更新是没有必要的。此时咱们能够应用 useCallback 返回缓存的函数，并把这个缓存的函数作为 props 传递给子组件，如下所示。

function Parent() {const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
    const callback = useCallback(() => {return count;}, [count]);

    return (
        <div>
            {count}
            <Child callback={callback}/>
            <div>
                <button onClick={() => setCount(count + 1)}>+</button>
                <input value={val} onChange={e => setVal(e.target.value)}/>
            </div>
        </div>
    );
}

function Child({callback}) {const [count, setCount] = useState(() => callback());
    useEffect(() => {setCount(callback());
    }, [callback]);
    return <div>
        {count}
    </div>
}

事实上，useEffect、useMemo、useCallback 都是自带闭包的。即每次组件渲染时，它们都会捕捉组件函数上下文中的状态信息，所以应用这三种 Hook 时，它们反映的都是以后的状态。如果要获取组件上一次的状态，那么能够应用 ref 来进行获取。

3.4 useRef

在 React 开发中，Ref 次要作用是获取组件实例或者 DOM 元素，创立 Ref 次要有两种形式，即 createRef 和 useRef。其中，应用 createRef 形式创立的 Ref 每次渲染都会返回一个新的援用，而 useRef 每次渲染都会返回雷同的援用。
应用 createRef 形式创立 Ref 次要是类组件。例如，上面是应用 createRef() 办法来创立 Ref 的例子，如下所示。

class Example extends React.Component {constructor(props) {super(props);
        this.myRef = React.createRef();}

    componentDidMount() {this.myRef.current.focus();
    }

    render() {return <input ref={this.myRef} type="text" />;
    }
}

如果应用 React Hooks 的 useRef() 办法创立 Ref，代码如下。

function Example() {const myRef = useRef(null);

    useEffect(() => {myRef.current.focus();
    }, [])

    return <input ref={myRef} type="text" />;
}

应用 useRef 形式创立的 Ref 返回一个援用的 DOM 对象，返回的对象将在组件的整个生存期内继续存在。

四、自定义 Hook

通过自定义 Hook，咱们能够将组件逻辑提取到可重用的函数中。在后面的聊天程序中，应用 React Hook 显示好友在线状态的代码如下所示。

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

function FriendStatus(props) {const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {return 'Loading...';}
  return isOnline ? 'Online' : 'Offline';
}

当初，假如聊天利用中有一个联系人列表，当用户在线时须要把名字设置为绿色。要实现这个需要，须要新建一个 FriendListItem 组件，并增加如下代码。

function FriendListItem(props) {
  
  …. // 省略其余雷同的代码

  return (<li style={{ color: isOnline ? 'green' : 'black'}}>
      {props.friend.name}
    </li>
  );
}

能够发现，FriendStatus 和 FriendListItem 之间的状态逻辑根本是一样的。在类组件中，共享组件之间的状态逻辑有 props 和高阶组件两种形式。而在 React Hook 中，如果要共享两个函数之间的逻辑，能够自定义一个 Hook 来封装订阅的逻辑，如下所示。

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

function useFriendStatus(friendID) {const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });
  return isOnline;
}

在 React 中，自定义的 Hook 是一个以 use 结尾的函数，函数外部能够调用其余的 Hook，并且自定义 Hook 时，入参和返回值都能够依据须要自定义，没有非凡的约定。
当初，须要共享的状态逻辑曾经被提取到 useFriendStatus 的自定义 Hook 中。而后，咱们就能够像应用一般函数一样调用自定义的 Hook 函数，如下所示。

function FriendStatus(props) {const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {return 'Loading...';}
  return isOnline ? 'Online' : 'Offline';
}


function FriendListItem(props) {const isOnline = useFriendStatus(props.friend.id);

  return (<li style={{ color: isOnline ? 'green' : 'black'}}>
      {props.friend.name}
    </li>
  );
}

自定义 Hook 是一种重用状态逻辑的机制，所以每次应用自定义 Hook 时，所有 state 和副作用都是齐全隔离的。须要再次强调的是，自定义 Hook 时须要以 use 结尾来命名，这也是为了动态代码检测工具的检测。

五、Hook 规定

Hook 实质上来说就是一个 JavaScript 函数，然而在应用它时须要遵循两条规定。

  • 只在最顶层应用 Hook，不能在循环、条件或嵌套函数中调用 Hook。
  • 只能在 React 函数中调用 Hook，不能在一般 JavaScript 函数中调用 Hook。

Hooks 的设计极度依赖事件定义的程序，如果在后序的渲染环节中 Hooks 的调用程序发生变化，就可能会呈现不可预知的问题。在 React 利用开发过程中，为了保障 Hooks 调用程序的稳定性，官网开发了一个名叫 eslint-plugin-react-hooks 的 ESLint 插件来进行动态代码检测。应用前，须要先将此插件增加到 React 我的项目中，如下所示。

npm install eslint-plugin-react-hooks --save-dev

装置实现后，会在 package.json 配置文件中看到如下配置脚本。

{
  "plugins": [
     ...  // 省略其余插件包
    "react-hooks"
  ],
  "rules": {
     ...    // 省略其余规定
    "react-hooks/rules-of-hooks": "error",   // 查看 Hook 的规定
    "react-hooks/exhaustive-deps": "warn"  // 查看 effect 的依赖
  }
}

通过下面的配置后，如果代码 不合乎 Hook 标准，那么零碎就会给出相应的正告，并提醒开发者进行对应的批改。

正文完
javascript
发表至： javascript
2021-02-09
 0
JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
基于-HTML5-WebGL-的垃圾分类系统
关于javascript:antd-pro-vue-设置路由缓存antd-pro-vue-keepalive-不生效处理
关于javascript:如何理解JavaScript中的函数