React Hooks教程之基础篇

wxz在掘金
7,141 阅读12分钟

什么是Hooks

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

为什么要用Hooks

代码可读性好，易于维护

1.hooks在function组件中使用，不用维护复杂的生命周期，不用担心this指向问题

Hooks给Function组件赋能，Function组件也可维护自己的state，不用担心组件通信过程中this指向的问题。

2.更好的逻辑复用方式

自定义hook相比目前react常见的代码复用方式（高阶组件，render props）都要简单易懂，具体可以参照本章自定义hooks章节

提升开发效率

我们来对比一下同一个功能用class组件实现和使用hooks的function组件实现的代码差异,

1.Class组件版本

import React from 'react';
class Person extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          username: "小明"
      };
  }
  
  componentDidMount() {
      console.log('组件挂载后要做的操作')
  }
  
  componentWillUnmount() {
      console.log('组件卸载要做的操作')
  }
  
  componentDidUpdate(prevProps, prevState) {
      if(prevState.username !== this.state.username) {
          console.log('组件更新后的操作')
      }
  }
  
  render() {
      return (
        <div>
            <p>欢迎 {state.username}</p>
            <input type="text" placeholder="input a username" onChange={(event) => this.setState({ username: event.target.value)})}></input>
        </div>
      );
  }
}

2.Hooks版本

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

export const Person = () => {
  const [name, setName] = useState("小明");
  
  useEffect(() => {
      console.log('组件挂载后要做的操作')
      return () => {
        console.log('组件卸载要做的操作')
      }
  }, []);
  
  useEffect(() => {
      console.log('组件更新后的操作')
  }, [name]);
  
  return (
    <div>
        <p>欢迎 {name}</p>
        <input type="text" placeholder="input a username" onChange={(event) => setName( event.target.value)}></input>
    </div>
  )
}

Hooks版本简化了很多代码，熟悉后可以显著提升开发效率。

怎样使用Hooks

Hooks基础API

useState(重点掌握)

1.参数：

  • 常量：组件初始化的时候就会定义
import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量,初始值为0，后续通过setCount改变它能让视图重新渲染
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • 函数：只有开始渲染的时候函数才会执行
// initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。
// 如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，
// 此函数只在初始渲染时被调用：
const [count, setCount] = useState(() => {
  const initialCount = someExpensiveComputation(props);
  return initialState;
})

2.返回值

useState返回值时一个长度为2的数组，数组第一项为为定义的变量（名称自己定），第二项时改变第一项的函数（名称自己定），具体示例可看上述代码。

useEffect(重点掌握)

该 Hook 有两个参数，第一个参数是一个包含命令式、且可能有副作用代码的函数，第二个参数是一个数组，此参数来控制该Effect包裹的函数执不执行，如果第二个参数不传递，则该Effect每次组件刷新都会执行，相当于class组件中的componentDidMount和componentDidupdate生命周期的融合。

1.基本使用方法

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

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

2.控制函数的执行

和上述代码类似，我们给useEffect传递第二个参数[count]，这样只有count改变的时候才会执行

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

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

  // 只有count改变时才会执行
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  },[count]);

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

import React, { useEffect } from 'react';

function Example() {
  // 组件挂载时只执行一次
  useEffect(() => {
    console.log("只执行一次，类似componentDidMount")
  },[]);

  return (
    <div>只执行一次的Effect</div>
  );
}

3.需要清除的副作用

有一些副作用是需要清除的。例如订阅外部数据源。这种情况下，清除工作是非常重要的，可以防止引起内存泄露！

示例1(每次渲染都会清除)：
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);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
示例2(只有组件卸载的时候清除)：

但我们给第二个参数传递一个空数组的时候，只有组件卸载时，Effect才会执行清除操作，此时的useEffect相当于class组件的componentDidMount和compinentWillUnmount的融合。

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);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  },[]);

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

我们在日常使用的时候要灵活运用，但尽量使用第二个参数来控制函数的执行，这样能优化性能。

useContext(重要)

该Hook接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

1.使用实例：

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

// 主题context
const ThemeContext = React.createContext(themes.light);

function App() {
  // 这里的value值改变，useContext包裹的值也会改变
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  // 上层最近的Provider的value属性的值
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

2.Class组件实现相同的逻辑请参考react官方文档-Context

简单示例：

// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
    // 无论多深，任何组件都能读取这个值。
    // 在这个例子中，我们将 “dark” 作为当前的值传递下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider，然后使用它的值。
  // 在这个例子中，当前的 theme 值为 “dark”。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

useReducer(重要)

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法（和redux用法十分相近）。

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

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。

参数：

  • 第一个参数是reducer纯函数
  • 第二个参数是初始的state
  • 第三个参数可以修改初始state，将初始 state 设置为 init(initialArg)

1.基本用法

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>
    </>
  );
}

useCallback(重点掌握)

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。

  • 常见应用场景：父组件向子组件传递会回调函数（但是react官方不推荐这种方式，官方推荐使用useReducer hook，通过传递dispatch来避免这种形式，具体原因参考官方解释）
  • 示例：
import React, { useEffect, useState, useCallback } from 'react';
// 子组件
function Son({callback}) {
    renturn (
        <a onClick={()=>callback("小红")}>点击切换姓名</a>
    )
}
// 父组件
function Parent() {
  const [name,setName] = useState("")
  useEffect(() => {
    console.log("获取数据并更新state")
    setName("小明")
  },[]);
  const callback = useCallback(name => {
    setName(name);
  }, []);
  return (
    <>
      <Son callback={callback} />;
      name:{name}
    <>
  )
}

useMemo(重点掌握)

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。

你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证!

应用场景：

  • 存储一次昂贵的计算
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • 跳过一次子节点的昂贵的重新渲染
function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

useRef(重要)

useRef 返回一个可变的 ref 对象，其 current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

const refContainer = useRef(initialValue);

使用场景：

  • 访问子组件dom
function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
  • 保存实例变量
function Timer() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });
  // ...
  return <div>使用useRef存储实例变量</div>
}

useImperativeHandle(不常用)

useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用：

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

在本例中，渲染 <FancyInput ref={inputRef} /> 的父组件可以调用 inputRef.current.focus()。

useLayoutEffect(不常用)

其函数签名与 useEffect 相同，使用方法一致，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

尽可能使用标准的 useEffect 以避免阻塞视觉更新。

  • useEffect与 componentDidMount、componentDidUpdate 不同的是，在浏览器完成布局与绘制之后，传给 useEffect 的函数会延迟调用。
  • useLayoutEffect则与componentDidMount、componentDidUpdate调用时机相同。

useDebugValue(不常用)

开发阶段调试时使用，具体用法参考官方文档

Hook进阶

自定义Hooks

通过自定义 Hook，可以将抽取多个组件可重用的逻辑，实现逻辑复用。

示例(以下示例出自阮一峰的网络日志)：

const Person = ({ personId }) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});

  useEffect(() => {
    setLoading(true); 
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId])

  if (loading === true) {
    return <p>Loading ...</p>
  }

  return <div>
    <p>You're viewing: {person.name}</p>
    <p>Height: {person.height}</p>
    <p>Mass: {person.mass}</p>
  </div>
}

我们将上述代码中获取person的逻辑抽离出来，方便其他类似的组件调用

const usePerson = (personId) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true);
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId]);  
  return [loading, person];
};

上述代码中的usePerson就是一个自定义hook，在其余组件中我们可以这样使用：

const Person = ({ personId }) => {
  const [loading, person] = usePerson(personId);

  if (loading === true) {
    return <p>Loading ...</p>;
  }

  return (
    <div>
      <p>You're viewing: {person.name}</p>
      <p>Height: {person.height}</p>
      <p>Mass: {person.mass}</p>
    </div>
  );
};

自己动手实现几个常用自定义hooks

  • useFetch(简单版):获取接口数据
import { useState, useEffect} from 'react';
import fetch from 'fetch';

/**
 * @param {String} url 
 * @param {Object} initState 
 */
const useFetch_0 = (url, initState) => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setDate] = useState(initState);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchData = async () =>{
      setIsLoading(true);
      try {
        const res = await fetch(url);
        setDate(res);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    }
    fetchData();

  }, [url]);

  return [
    data,
    isLoading,
    isError,
  ];
}

export default useFetch_0;

父页面使用：const [data,isLoading,isError] = useFetch(url,initState)

  • usePrevious:获取上一轮的props和state
function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

// 使用
function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return <h1>Now: {count}, before: {prevCount}</h1>;
}

第三方优质自定义Hooks

github目前已经有很多优质自定义hooks，参考地址：github.com/rehooks/awe…

自定义hooks举例

useDeepCompareEffect

import React from 'react';
import { useDeepCompareEffect } from 'use-deep-compare';

function App({ object, array }) {
  useDeepCompareEffect(() => {
    // do something significant here
    return () => {
      // return to clean up that significant thing
    };
  }, [object, array]);

  return <div>{/* render significant thing */}</div>;
}

useDeepCompareCallback

import React from 'react';
import { useDeepCompareCallback } from 'use-deep-compare';

function App({ object, array }) {
  const callback = useDeepCompareCallback(() => {
    // do something significant here
  }, [object, array]);

  return <div>{/* render significant thing */}</div>;
}

useDeepCompareMemo

import React from 'react';
import { useDeepCompareMemo } from 'use-deep-compare';

function App({ object, array }) {
  const memoized = useDeepCompareMemo(() => {
    // do something significant here
  }, [object, array]);

  return <div>{/* render significant thing */}</div>;
}

import React, { useState } from 'react';
import { useDebounce } from 'use-debounce';

export default function Input() {
  const [text, setText] = useState('Hello');
  const [value] = useDebounce(text, 1000);

  return (
    <div>
      <input
        defaultValue={'Hello'}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Actual value: {text}</p>
      <p>Debounce value: {value}</p>
    </div>
  );
}

const data = useAsyncMemo(doAPIRequest, [])

使用Hooks实现Class组件常用生命周期

  • componentDidMount
useEffect(()=>{
    // do something
},[])
  • componentDidUpdate
useEffect(()=>{
    // do something
})
  • componentWillUnmount
useEffect(()=>{
    return ()=> {
        // do something
    }
},[])

function ScrollView({row}) {
  let [isScrollingDown, setIsScrollingDown] = useState(false);
  let [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // Row 自上次渲染以来发生过改变。更新 isScrollingDown。
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}
  • shouldComponentUpdate

可以使用useMemo，如果不涉及比较组件内部state，建议使用memo

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

Hooks常见问题

大部分常见的问题在上述代码中都体现了，其余问题请参考官方文档问题模块

Hooks注意事项

  • 只在最顶层使用 Hook
  • 只在 React 函数中调用 Hook
  • 详细规则请参考官方文档hooks规则

总结

  • useState和useEffect可以覆盖绝大多数业务场景
  • 复杂的组件使用useReducer代替useState
  • 在useState和useEffect不满足业务需求的时候，使用useContext，useRef，或者第三方自定义钩子来解决
  • useMemo和useCallback用来做性能优化，如果不用他俩代码应该也能正确运行

参考文献

avatar
文章
阅读
粉丝