React Hook 系列（一）：完全搞懂react hooks 用法（长文慎点）

时间 2019-12-16

标签 react hook 系列完全 hooks 用法长文栏目 React 繁體版

原文原文链接

用心阅读，跟随codesandbox demo或运行源码，你将熟悉react各类组件的优缺点及用法，完全熟悉react hook的用法，收益应该不小😀😀😀javascript

大纲：html

react 不一样组件用法。
react hook 相比之前带来什么。
react hook 的用法。

React 组件的发展

1. 功能（无状态）组件

Functional (Stateless) Component，功能组件也叫无状态组件，通常只负责渲染。java

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
复制代码

2. 类（有状态）组件

Class (Stateful) Component，类组件也是有状态组件，也能够叫容器组件。通常有交互逻辑和业务逻辑。react

class Welcome extends React.Component {
	state = {
		name: ‘tori’,
	}
  componentDidMount() {
		fetch(…);
		…
	}
  render() {
    return (
		<> <h1>Hello, {this.state.name}</h1> <button onClick={() => this.setState({name: ‘007’})}>更名</button> </> ); } } 复制代码

3. 渲染组件

Presentational Component，和功能（无状态）组件相似。git

const Hello = (props) => {
  return (
    <div> <h1>Hello! {props.name}</h1> </div>
  )
}
复制代码

**📢 总结： **github

函数组件必定是无状态组件，展现型组件通常是无状态组件；
类组件既能够是有状态组件，又能够是无状态组件；
容器型组件通常是有状态组件。
划分的原则归纳为： 分而治之、高内聚、低耦合；

经过以上组件之间的组合能实现绝大部分需求。json

4. 高阶组件

Higher order components (HOC)redux

HOC 主要是抽离状态，将重复的受控组件的逻辑抽离到高阶组件中，以新的props传给受控组件中，高阶组件中能够操做props传入受控组件。开源库中常见的高阶组件：Redux的connect， react-router的withRouter等等。api

Class HocFactory extends React.Component {
    constructor(props) {
      super(props)
    }
	// 操做props
	// …
    render() {
      const newProps = {…};
      return (Component) => <Component {…newProps} />;
    }
} 
Const Authorized = (Component) => (permission) => {
	return Class Authorized extends React.Component {
		…
		render() {
			const isAuth = ‘’;
			return isAuth ? <Component /> : <NoMatch />; } } } // 项目中涉及到的高阶组件 // 主要做用是将全部action经过高阶组件代理到component的Pro上。 import { bindActionCreators } from ‘redux’; import { connect } from ‘react-redux'; // 全部页面action集合 import * as actions from './actions'; // 缓存actions, 避免render从新加载 let cachedActions; // action经过bindActionCreators绑定dispatch, const bindActions = (dispatch, ownProps) => { if (!cachedActions) { cachedActions = { dispatch, actions: bindActionCreators(actions, dispatch), }; } return cachedActions; }; const connectWithActions = ( mapStateToProps, mergeProps, options ) => (component) => connect( mapStateToProps, bindActions, mergeProps, options )(component); export default connectWithActions; // 相似还有log中间件样子的等等。 复制代码

HOC的不足

HOC产生了许多无用的组件，加深了组件层级，性能和调试受影响。
多个HOC 同时嵌套，劫持props，命名可能会冲突，且内部没法判断Props是来源于那个HOC。

5. Render Props

Render Props 你能够把它理解成 JavaScript 中的回调函数数组

// 实现一个控制modal visible的高阶组件
class ToggleVisible extends React.Component {
	state = {
		visible: false
	};
	toggle = () => {
		this.setState({visible: !this.state.visible});
	}
	render() {
		return (
		    <>{this.props.children({visible, toggle})}</>
		);
	}
}
//使用
const EditUser = () => (
	<ToggleVisible>
		{({visible, toggle}) => (<>
		    <Modal visible={visible}/>
		    <Button onClick={toggle}>打开/关闭modal</Button>
		</>)}
	</ToggleVisible>
)
复制代码

📢 优势

组件复用不会产生多余的节点，也就是不会产生多余的嵌套。
不用担忧props命名问题。

6. 组合式组件（Compound Component）

子组件所须要的props在父组件会封装好，引用子组件的时候就不必传递全部props了。组合组件核心的两个方法是React.Children.map和React.cloneElement。

例以下面子组件须要的click事件转移到了父组件，经过父组件内部封装到子组件上，ant-design的不少group组件用到了此方法。

参考文章

class GroupButton extends React.PureComponent {
  state = {
    activeIndex: 0
  };
  render() {
    return (
      <> {React.Children.map(this.props.children, (child, index) => child.type ? React.cloneElement(child, { active: this.state.activeIndex === index, onClick: () => { this.setState({ activeIndex: index }); this.props.onChange(child.props.value); } }) : child )} </> ); } } // 用法 <GroupButton onChange={e => { console.log(“onChange”, e); }} > <Button value="red">red</Button> <Button value="yellow">yellow</Button> <Button value=“blue”>blue</Button> <Button value="white">white</Button> </GroupButton> 复制代码

🙊 废话结束，开始进入正题。。。

👍 React hooks

Hook 出现以前，组件之间复用状态逻辑很难，解决方案（HOC、Render Props）都须要从新组织组件结构，且代码难以理解。在React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件，render props 等其余抽象层组成的组件会造成“嵌套地狱”。

组件维护愈来愈复杂，譬如事件监听逻辑要在不一样的生命周期中绑定和解绑，复杂的页面componentDidMount包涵不少逻辑，代码阅读性变得不好。

class组件中的this难以理解，且class 不能很好的压缩，而且会使热重载出现不稳定的状况。更多引子介绍参见官方介绍。

因此hook就为解决这些问题而来：

避免地狱式嵌套，可读性提升。
函数式组件，比class更容易理解。
class组件生命周期太多太复杂，使函数组件存在状态。
解决HOC和Render Props的缺点。
UI 和逻辑更容易分离。

下面逐一介绍官方提供的hook API。

1. useState

📢 函数组件有状态了

const [state, setState] = useState(initialState); state为变量，setState 修改 state值的方法， setState也是异步执行。

DEMO1

class this.setState更新是state是合并， useState中setState是替换。

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
	const [obj, setData] = useState();
  return (
    <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div>
  );
}
复制代码

2. useEffect

📢 忘记生命周期，记住反作用

useEffect(() =>  {// Async Action}, ?[dependencies]); // 第二参数非必填
复制代码

DEMO2

function Hook2() {
  const [data, setData] = useState();
  useEffect(() => {
    console.log("useEffect");
  });
  return (
    <div> {(() => { console.log("render"); return null; })()} <p>data: {JSON.stringify(data)}</p> </div>
  );
}
复制代码

执行结果：

结论：

useEffect 是在render以后生效执行的。

DEMO3

import React, { useState, useEffect, useRef } from “react”;
function Demo3() {
  const [data, setData] = useState();
  useEffect(() => {
    console.log("useEffect—[]”);
    fetch(“https://www.mxnzp.com/api/lottery/common/latest?code=ssq”)
      .then(res => res.json())
      .then(res => {
        setData(res);
      });
  }, []);

  useEffect(() => {
    console.log("useEffect ---> 无依赖");
  });

  useEffect(() => {
    console.log(“useEffect 依赖data： data发生了变化”);
  }, [data]);

  return (
    <div>
      <p>data: {JSON.stringify(data)}</p>
    </div>
  );
}
export default Demo3;
复制代码

执行结果：

结论：

effect在render后按照先后顺序执行。
effect在没有任何依赖的状况下，render后每次都按照顺序执行。
effect内部执行是异步的。
依赖[]能够实现相似componentDidMount的做用，但最好忘记生命周期，只记反作用。

DEMO4

import React, { useState, useEffect, useRef } from "react";

function Demo4() {
  useEffect(() => {
    console.log(“useEffect1”);
    const timeId = setTimeout(() => {
      console.log(“useEffect1-setTimeout-2000”);
    }, 2000);
    return () => {
      clearTimeout(timeId);
    };
  }, []);
  useEffect(() => {
    console.log("useEffect2");
    const timeId = setInterval(() => {
      console.log("useEffect2-setInterval-1000");
    }, 1000);
    return () => {
      clearInterval(timeId);
    };
  }, []);
  return (
    <div> {(() => { console.log(“render”); return null; })()} <p>demo4</p> </div>
  );
}
export default Demo4;
复制代码

执行结果：

结论：

effect回调函数是按照前后顺序同时执行的。
effect的回调函数返回一个匿名函数，至关于componentUnMount的钩子函数，通常是remove eventLisenter， clear timeId等，主要是组件卸载后防止内存泄漏。

综上所述，useEffect 就是监听每当依赖变化时，执行回调函数的存在函数组件中的钩子函数。

3. useContext

跨组件共享数据的钩子函数

const value = useContext(MyContext);
// MyContext 为 context 对象（React.createContext 的返回值） 
// useContext 返回MyContext的返回值。
// 当前的 context 值由上层组件中距离当前组件最近的<MyContext.Provider> 的 value prop 决定。
复制代码

DEMO5

import React, { useContext, useState } from “react”;
const MyContext = React.createContext();
function Demo5() {
  const [value, setValue] = useState("init”);
  console.log(“Demo5”);
  return (
    <div>
      {(() => {
        console.log("render");
        return null;
      })()}
      <button onClick={() => {
        console.log('click：更新value')
        setValue(`${Date.now()}_newValue`)
      }}>
        改变value
      </button>
      <MyContext.Provider value={value}>
        <Child1 />
        <Child2 />
      </MyContext.Provider>
    </div>
  );
}

function Child1() {
  const value = useContext(MyContext);
  console.log(“Child1-value”, value);
  return <div>Child1-value: {value}</div>;
}

function Child2(props) {
  console.log(‘Child2’)
  return <div>Child2</div>;
}
复制代码

执行结果：

结论：

useContext 的组件总会在 context 值变化时从新渲染，因此<MyContext.Provider>包裹的越多，层级越深，性能会形成影响。
<MyContext.Provider> 的 value 发生变化时候，包裹的组件不管是否订阅content value，全部组件都会重新渲染。
demo中child2 不该该rerender, 如何避免没必要要的render？*
使用React.memo优化。

const Child2 = React.memo((props) => {
  return <div>Child2</div>;
})
复制代码

执行结果：

注意： 默认状况下React.memo只会对复杂对象作浅层对比，若是你想要控制对比过程，那么请将自定义的比较函数经过第二个参数传入来实现。参考连接

4. useRef

传送门

const refContainer = useRef(initialValue);
复制代码

useRef 返回一个可变的 ref 对象, 和自建一个 {current: …} 对象的惟一区别是，useRef 会在每次渲染时返回同一个 ref 对象, 在整个组件的生命周期内是惟一的。
useRef 能够保存任何可变的值。其相似于在 class 中使用实例字段的方式。 总结：
useRef 能够存储那些不须要引发页面从新渲染的数据。
若是你刻意地想要从某些异步回调中读取 /最新的/ state，你能够用一个 ref 来保存它，修改它，并从中读取。

5. useReducer

const [state, dispatch] = useReducer(reducer, initialState);
复制代码

reducer就是一个只能经过action将state从一个过程转换成另外一个过程的纯函数; useReducer就是一种经过(state,action) => newState的过程，和redux工做方式同样。数据流： dispatch(action) => reducer更新state => 返回更新后的state

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> </> ); } 复制代码

官方推荐如下场景须要useReducer更佳：

state 逻辑较复杂且包含多个子值，能够集中处理。
下一个 state 依赖于以前的 state 。
想更稳定的构建自动化测试用例。
想深层级修改子组件的一些状态，使用 useReducer 还能给那些会触发深更新的组件作性能优化，由于你能够向子组件传递 dispatch 而不是回调函数。
使用reducer有助于将读取与写入分开。 DEMO6

const fetchReducer = (state, action) => {
  switch (action.type) {
    case “FETCH_INIT":
      return {
        ...state,
        loading: true,
        error: false
      };
    case “FETCH_SUCCESS”:
      return {
        ...state,
        loading: false,
        error: false,
        data: action.payload
      };
    case "FETCH_FAIL":
      return {
        …state,
        loading: false,
        error: true
      };
    default:
      throw new Error();
  }
};

function Demo6() {
  const [state, dispatch] = useReducer(fetchReducer, {
    loading: false,
    error: false,
    msg: "",
    data: {}
  });

  const getData = useCallback(async () => {
    try {
      dispatch({ type: "FETCH_INIT" });
      const response = await fetch(
        "https://www.mxnzp.com/api/lottery/common/latest?code=ssq"
      );
      const res = await response.json();

      if (res.code) {
        dispatch({ type: "FETCH_SUCCESS", payload: res.data });
      } else {
        dispatch({ type: “FETCH_FAIL”, payload: res.msg });
      }
    } catch (error) {
      dispatch({ type: “FETCH_FAIL”, payload: error });
    }
  }, []);

  useEffect(() => {
    getData();
  }, [getData]);

  return (
    <Loading loading={state.loading}>
      <p>开奖号码： {state.data.openCode}</p>
    </Loading>
  );
}
复制代码

demo6useReducer处理了多个能够用useState实现的逻辑，包括loading, error, msg, data。

useContext 和 useReducer模拟redux管理状态

import React, { useReducer, useContext } from “react”;

const ModalContext = React.createContext();

const visibleReducer = (state, action) => {
  switch (action.type) {
    case “CREATE”:
      return { ...state, ...action.payload };
    case "EDIT":
      return { ...state, ...action.payload };
    default:
      return state;
  }
};
function Demo7() {
  const initModalVisible = {
    create: false,
    edit: false
  };
  const [state, dispatch] = useReducer(visibleReducer, initModalVisible);

  return (
    <ModalContext.Provider value={{ visibles: state, dispatch }}> <Demo7Child /> </ModalContext.Provider> ); } function Demo7Child() { return ( <div> Demo7Child <Detail /> </div> ); } function Detail() { const { visibles, dispatch } = useContext(ModalContext); console.log("contextValue", visibles); return ( <div> <p>create: {`${visibles.create}`}</p> <button onClick={() => dispatch({ type: "CREATE", payload: { create: true } })} > 打开建立modal </button> </div> ); } export default Demo7; 复制代码

逻辑很清晰的抽离出来，context value中的值不须要在组件中透传，即用即取。DEMO7

注意 React 会确保 dispatch 函数的标识是稳定的，而且不会在组件从新渲染时改变。这就是为何能够安全地从 useEffect 或 useCallback 的依赖列表中省略 dispatch。

6. useCallback

语法：

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
复制代码

返回一个 memoized 回调函数。

useCallback解决了什么问题？先看DEMO8

import React, { useRef, useEffect, useState, useCallback } from “react”;

function Child({ event, data }) {
  console.log("child-render");
  // 第五版
  useEffect(() => {
    console.log(“child-useEffect”);
    event();
  }, [event]);
  return (
    <div> <p>child</p> {/* <p>props-data: {data.data && data.data.openCode}</p> */} <button onClick={event}>调用父级event</button> </div>
  );
}

const set = new Set();

function Demo8() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState({});

  // 初版
  // const handle = async () => {
  // const response = await fetch(
  // "https://www.mxnzp.com/api/lottery/common/latest?code=ssq"
  // );
  // const res = await response.json();
  // console.log("handle", data);
  // setData(res);
  // };

  // 第二版
  // const handle = useCallback(async () => {
  // const response = await fetch(
  // “https://www.mxnzp.com/api/lottery/common/latest?code=ssq"
  // );
  // const res = await response.json();
  // console.log(“handle”, data);
  // setData(res);
  // });

  // 第三版
  // const handle = useCallback(async () => {
  // const response = await fetch(
  // “https://www.mxnzp.com/api/lottery/common/latest?code=ssq”
  // );
  // const res = await response.json();
  // setData(res);
  // console.log(“useCallback”, data);
  // // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, []);

  // // 第四版
  // const handle = useCallback(async () => {
  // const response = await fetch(
  // “https://www.mxnzp.com/api/lottery/common/latest?code=ssq"
  // );
  // const res = await response.json();
  // setData(res);
  // console.log(“parent-useCallback", data);
  // // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, []);

  // 第五版
  const handle = useCallback(async () => {
    const response = await fetch(
      "https://www.mxnzp.com/api/lottery/common/latest?code=ssq"
    );
    const res = await response.json();
    setData(res);
    console.log("parent-useCallback", data);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [count]);
  set.add(handle);

  console.log(“parent-render====>”, data);
  return (
    <div> <button onClick={e => { setCount(count + 1); }} > count++ </button> <p>set size: {set.size}</p> <p>count:{count}</p> <p>data: {data.data && data.data.openCode}</p> <p>-------------------------------</p> <Child event={handle} /> </div> ); } export default Demo8; 复制代码

结论：

初版：每次render，handle都是新的函数，且每次都能拿到最新的data。
第二版：用useCallback包裹handle，每次render， handle也是新的函数，且每次都能拿到最新的data，和一版效果同样，因此不建议这么用。
第三版：useCallback假如第二个参数deps，handle会被memoized，因此每次data都是第一次记忆时候的data（闭包）。
第四版： useCallback依赖count的变化，每当useCallback 变化时，handle会被从新memoized。
第五版：每当count变化时，传入子组件的函数都是最新的，因此致使child的useEffect执行。 总结：
useCallback将返回一个记忆的回调版本，仅在其中一个依赖项已更改时才更改。
当将回调传递给依赖于引用相等性的优化子组件以防止没必要要的渲染时，此方法颇有用。
使用回调函数做为参数传递，每次render函数都会变化，也会致使子组件rerender， useCallback能够优化rerender。 疑问：如何优化子组件没必要要的渲染？

7. useMemo

语法： const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);; 返回一个 memoized 值，和useCallback同样，当依赖项发生变化，才会从新计算 memoized 的值,。 useMemo和useCallback不一样之处是：它容许你将 memoized 应用于任何值类型（不只仅是函数）。 DEMO9

import React, { useState, useMemo } from “react”;

function Demo9() {
  const [count, setCount] = useState(0);
  const handle = () => {
    console.log(“handle”, count);
    return count;
  };

  const handle1 = useMemo(() => {
    console.log("handle1", count);
    return count;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handle2 = useMemo(() => {
    console.log(“handle2”, count);
	  // 大计算量的方法
    return count;
  }, [count]);

  console.log("render-parent");

  return (
    <div> <p> demo9: {count} <button onClick={() => setCount(count + 1)}>++count</button> </p> <p>-------------------</p> <Child handle={handle1} /> </div> ); } function Child({ handle }) { console.log("render-child"); return ( <div> <p>child</p> <p>props-data: {handle}</p> </div> ); } export default Demo9; 复制代码

总结：

useMemo 会在render前执行。
若是没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。
useMemo用于返回memoize,防止每次render时大计算量带来的开销。
使用useMemo优化需谨慎，由于优化自己也带来了计算，大多数时候，你不须要考虑去优化没必要要的从新渲染。

其余Hook

1. useImperativeHandle

// ref：须要传递的ref
// createHandle: 须要暴露给父级的方法。
// deps: 依赖
useImperativeHandle(ref, createHandle, [deps])
复制代码

useImperativeHandle 应当与forwardRef一块儿使用。先看DEMO10

import React, {
  useRef,
  forwardRef,
  useImperativeHandle,
  useEffect,
  useState
} from "react";

const Child = forwardRef((props, ref) => {
  const inputEl = useRef();
  const [value, setVal] = useState("");
  // 初版
  // useImperativeHandle(ref, () => {
  //   console.log("useImperativeHandle");
  //   return {
  //     value,
  //     focus: () => inputEl.current.focus()
  //   };
  // });

  // 第二版
  useImperativeHandle(
    ref,
    () => {
      console.log(“useImperativeHandle");
      return {
        value,
        focus: () => inputEl.current.focus()
      };
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );

  return (
    <input
      ref={inputEl}
      onChange={e => setVal(e.target.value)}
      value={value}
      {...props}
    />
  );
});
function Demo10() {
  const inputEl = useRef(null);

  useEffect(() => {
    console.log(“parent-useEffect”, inputEl.current);
    inputEl.current.focus();
  }, []);

  function click() {
    console.log("click:", inputEl.current);
    inputEl.current.focus();
  }
  console.log(“Demo10”, inputEl.current);
  return (
    <div>
      <Child ref={inputEl} />
      <button onClick={click}>click focus</button>
    </div>
  );
}
export default Demo10;
复制代码

结论：

useImperativeHandle在当前组件render后执行。
初版：没有deps，每当rerender时，useImperativeHandle都会执行，且能拿到 state中最新的值, 父组件调用传入的方法也是最新。
第二版：依赖[]，每当rerender时,useImperativeHandle不会执行，且不会更新到父组件。
第三版：依赖传入的state值 [value]，达到想要的效果。

2. useDebugValue

不经常使用, 只能在React Developer Tools看到，详见官方传送门。

DEMO11

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(false);
  // 在开发者工具中的这个 Hook 旁边显示标签
  // e.g. "FriendStatus: Online"
  useDebugValue(isOnline ? "Online" : "Offline");
  return isOnline;
}
function Demo11() {
  const isOnline = useFriendStatus(567);
  return <div>朋友是否在线：{isOnline ? "在线" : "离线"}</div>;
}
复制代码

3. useLayoutEffect

不多用，与 useEffect 相同，但它会在全部的 DOM 变动以后同步调用 effect, 详见官方传送门。

📢 最后

欢迎交流，，，😀🍻🍻😀

下期预告

《自定义 Hook 在项目中的实践》