React - Hooks (useReducer)

[jtwang7]

React - Hooks (useReducer)

参考文章：

• 这一次彻底搞定 useReducer - 基础概念
• 这一次彻底搞定useReducer-使用篇
• 这一次彻底搞定 useReducer - useContext使用

什么是 reducer?

简单来说，reducer 是一个函数，形如 (state, action) => newState，其接收当前组件的 state 和触发的动作 action，计算并返回最新的 state。其中 action 为一个对象类型，包含 type 和 payload 两个属性。

// 定义了一个 reducer，接收 state 和 action；
function countReducer(state, action) {
    // reducer 根据 action的类型对应修改 state
    switch(action.type) {
        case 'add':
            return state + 1;
        case 'sub':
            return state - 1;
        default: 
            return state;
    }
}

reducer 的使用重点：

• reducer 是一个纯函数，内部不能包含任何 UI 或副作用，相同的输入（state、action），reducer 函数无论执行多少遍始终会返回相同的输出（newState）。

  纯函数意味着函数的输出只与输入相关。

• reducer 处理的 state 对象必须是 immutable，这意味着永远不要直接修改参数中的 state对象，reducer函数应该每次都返回一个新的 state object。

  最佳实践：

  • 若 state 多层嵌套，推荐使用 immer 等 immutable 库解决。
  • 若 state 不是多层嵌套，则可以通过 ES6 的解构浅复制创建一个新对象，并复写需要改变的 state 属性。

    function countReducer(state, action) {
    switch(action.type) {
    case 'add':
    // 返回新对象，该对象由解构赋值实现浅复制，然后修改相应 state 属性，覆盖之前的同名属性。
    return { ...state, count: state.count + 1; }
    case 'sub':
    return { ...state, count: state.count - 1; }
    default: 
    return count;
    }
    }

immutable 在 React 中的必要性

• 保持幂等性，使得 state 更改更加可预测，可控。创建一个新的 state 副本进而在副本上修改，而不是直接修改原 state 对象，可以保证在本次渲染中，使用的 state 原数据都是一样的。

  和文件拷贝同一个道理，你可以基于文件拷贝的副本生成新的文件，但假如你直接修改源文件，一旦修改了就再也返回不到最初的文件了，相当于丢失了原始文件。

• React 在比较 oldState 和 newState 的时候是使用 Object.is 函数进行浅比较，若修改原对象的属性值，对象内存地址不发生改变，则不会出发组件的 rerender。因此需要整体替换 state 触发组件重新渲染。

action

action 用来表示触发 state 修改的行为。 action 是一个对象类型，包含两个属性：

• type: 具体的行为名称（自定义），用于区分不同的行为。
• payload: 额外传递的参数

const action = {
    // 行为名称
    type: 'addBook',
    // 负载参数
    payload: {
        book: {
            bookId,
            bookName,
            author,
        }
    }
}
function bookReducer(state, action) {
    switch(action.type) {
        case 'addBook':
            // 可通过 ES6 解构语法将部分参数单独解构使用
            const { book } = action.payload;
            return {
                ...state,
                books: {
                    ...state.books,
                    [book.bookId]: book,
                }
            };
        case 'sub':
            // ....
        default: 
            return state;
    }
}

reducer 总结

• 语法：(state, action) => newState
• Immutable：每次都返回一个newState， 永远不要直接修改state对象
  • 生成 state 副本的方法有 1. 解构赋值 2. immer 等第三方 immutable 库
• action：具体行为，一个常规的 action 对象通常由 type 和 payload（可选）组成
  • type： 本次操作的类型，也是 reducer 条件判断的依据
  • payload： 提供操作附带的数据信息

[jtwang7]

React - Hooks (useReducer)

参考文章：

• 这一次彻底搞定 useReducer - 基础概念
• 这一次彻底搞定useReducer-使用篇
• 这一次彻底搞定 useReducer - useContext使用

useReducer 使用场景

useReducer 与 useState 作用很像，都是 React Hooks 中用于状态声明和管理的方法。 useState 通常用于一些简单的状态管理。而 useReducer 主要有以下应用场景：

• state 是一个数组或者对象
• state 变化很复杂，经常一个操作需要修改很多 state
• 构建自动化测试用例来保证程序的稳定性
• state 涉及到深层子组件内的状态修改
• 期望 UI 和业务分开维护

useReducer

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

• reducer：上篇文章介绍的 reducer 函数，(state, action) => newState。
• initState：初始化 state 值。
• init：函数类型，接收 initState 作为函数参数，设置初始值为 init(initState) 的返回值。

  useReducer 提供了两种用于初始化 state 的参数（initState / init）

state 初始化

• initState 指定初始值：只使用 initState 时，useReducer 会将 initState 接收的值作为初始 state 传入。
• init 惰性初始化求值：惰性地创建初始 state，需要将 init 函数作为 useReducer 的第三个参数传入，这样初始 state 将被设置为 init(initialArg)。

  init 适用于将计算 state 的逻辑提取到 reducer 外部的场景。如果初始 state 计算比较复杂，可以单独分离一个创建 state 的函数。该函数仅会在组件初始创建的时候惰性求值。

dispatch

dispatch 接收一个对象作为 action，并执行 useReducer 中相应的 reducer 函数，reducer 函数中 state 参数取自 useReducer 持有的 state 变量，action 参数取自 dispatch 接收的 action 对象。dispatch 执行结果的的返回值用于替换原有的 state 变量。

const [myState, dispatch] = useReducer(reducer, init);
// dispatch 流程
// dispatch(myAction) -> reducer(myState, myAction) & return newState -> myState = newState

dispatch 特点

React 会确保 dispatch 函数的标识是稳定的，并且不会在组件重新渲染时改变。 这一特点在 React 性能优化中有着许多应用。例如 props 传递回调函数时，由于每次 render 都会导致回调函数重新定义，引发子组件的 rerender，传递 dispatch 可以避免该问题。此外，dispatch 还可以用于避免 useEffect 某个 state 频繁更新导致多次渲染的问题。

useState 版 login 实现

function LoginPage() {
    // 可以看到 login 需要维护许多 state，而这些 state 又是相关的。
    // 如果用 useState，则需要定义多个分散的 state，且 setState 会被分散在代码各处，不好维护。
    const [name, setName] = useState(''); // 用户名
    const [pwd, setPwd] = useState(''); // 密码
    const [isLoading, setIsLoading] = useState(false); // 是否展示loading，发送请求中
    const [error, setError] = useState(''); // 错误信息
    const [isLoggedIn, setIsLoggedIn] = useState(false); // 是否登录

    const login = (event) => {
        event.preventDefault();
        setError('');
        setIsLoading(true);
        login({ name, pwd })
            .then(() => {
                setIsLoggedIn(true);
                setIsLoading(false);
            })
            .catch((error) => {
                // 登录失败: 显示错误信息、清空输入框用户名、密码、清除loading标识
                setError(error.message);
                setName('');
                setPwd('');
                setIsLoading(false);
            });
    }
    return ( 
        //  返回页面JSX Element
    )
}

useState 在复杂 state 管理中的一些问题

• 需要定义大量 state 来描述页面状态。

  useState 能够将类组件中 state 对象单独分离，在一些简单的场景下，它是有优势的，因为类组件中只有一个 state，却管理了一整个组件的状态，useState 将其解耦了出来。但若存在多个 state 相关，useState 就似乎有点解耦过头了，它将一些局部相关的 state 都拆分开了。

• setState 方法会被分散到各处。

  我们可以将多个相关的 useState 都放在一处定义，这样 state 就被人为的归纳到了一处。但是我们却无法控制 setState 的书写位置，当我们需要修改 setState 时，就需要花费大量的精力去到代码中寻找。

useReducer 版的 login 实现

// useReducer 的第二参数：初始化 state
const initState = {
    name: '',
    pwd: '',
    isLoading: false,
    error: '',
    isLoggedIn: false,
}
// useReducer 的第一参数：定义了各个 actionType 对应的 state 修改行为
function loginReducer(state, action) {
    switch(action.type) {
        case 'login':
            return {
                ...state,
                isLoading: true,
                error: '',
            }
        case 'success':
            return {
                ...state,
                isLoggedIn: true,
                isLoading: false,
            }
        case 'error':
            return {
                ...state,
                error: action.payload.error,
                name: '',
                pwd: '',
                isLoading: false,
            }
        default: 
            return state;
    }
}
function LoginPage() {
    // 这里仅用一次 useReducer 就代替了上述多个 useState 定义
    const [state, dispatch] = useReducer(loginReducer, initState);
    // 对象解构
    const { name, pwd, isLoading, error, isLoggedIn } = state;
    const login = (event) => {
        event.preventDefault();
        // 告知 dispatch 行为类型，就会执行事先定义好的逻辑，返回新的 state 对象。
        dispatch({ type: 'login' });
        login({ name, pwd })
            .then(() => {
                dispatch({ type: 'success' });
            })
            .catch((error) => {
                dispatch({
                    type: 'error'
                    payload: { error: error.message }
                });
            });
    }
    return ( 
        //  返回页面JSX Element
    )
}

对比发现，useReducer 将 state 和 setState 操作都统一到了一起，在使用时，我们只需要调用 dispatch 指定对应的操作类型，不需要关心 reducer 是如何处理 state 的，我们看到的就是 state 输入的值以及 state 输出的结果。此外，useReducer 将 state 的处理逻辑都封装到了 dispatch 函数内，使得我们复用 state 的逻辑更加容易，比如在其他函数中也需要触发登录 error 状态，只需要 dispatch({ type: 'error' })。

[jtwang7]

React - Hooks (useReducer)

参考文章：

• 这一次彻底搞定 useReducer - 基础概念
• 这一次彻底搞定useReducer-使用篇
• 这一次彻底搞定 useReducer - useContext使用

前言

在上述两篇中，讲解了 reducer 的基础概念以及 useReducer 的基本使用。 useReducer 可以帮助我们集中式的处理复杂的state管理，此外 useReducer 另一大用处就是能够解决深层子组件的状态修改。 由于 React 是单向数据流传递，因此对于 state 在深层次的组件状态修改，往往需要通过组件树中多次传递回调函数来解决，通过 props 添加回调层层传递的方法存在以下问题：

• 传递的回调函数在组件重新渲染时也会重新定义，导致 diff 算法认为父组件向子组件传递了不同的回调函数，从而引发子组件的重新渲染。
• 深层子组件需要通过多个组件作为中转层层传递。导致中转组件被深度耦合在了父组件与深层子组件之间。

context / useContext

context 作用就是对它所包含的组件树提供全局共享数据。 useContext 为函数组件提供了获取 consumer 的 Hook。

// 第一步：创建需要共享的context
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 第二步：使用 Provider 提供 ThemeContext 的值，Provider所包含的子树都可以直接访问ThemeContext的值
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
// Toolbar 组件并不需要透传 ThemeContext
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton(props) {
  // 第三步：使用共享 Context
  const theme = useContext(ThemeContext);
  render() {
    return <Button theme={theme} />;
  }
}

1. 创建 Context 对象 const MyContext = React.createContext(defaultValue); 当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。 只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。此默认值有助于在不使用 Provider 包装组件的情况下对组件进行测试。

   注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。

2. Context.Provider 包裹子级消费者 <MyContext.Provider value={/* 某个值 */}>消费组件</MyContext.Provider> 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。

   通过新旧值检测来确定变化，使用了与 Object.is 相同的算法。

3. useContext 使用共享 Context const value = useContext(MyContext); 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 的 value prop 决定。

   调用了 useContext 的组件(消费组件)总会在 context 值变化时重新渲染。也就是说，当Context Provider 的 value 发生变化时，他的所有子级消费者都会rerender。

注意！！！若定义 Context 对象的组件和使用 Context 对象的组件位于不同的 JS 文件（通常都是这种情况），你需要将定义的 Context 对象导出，并在使用的组件中 import 导入。 组件导出使用的是 export default，因此我们还可以用 export 导出 Context 对象的引用。

// App.js
// export 导出 Context 对象
export const ThemeContext = React.createContext('light');

// 组件是通过 export default 导出的 export default class App extends React.Component { render() { // 第二步：使用 Provider 提供 ThemeContext 的值，Provider所包含的子树都可以直接访问ThemeContext的值 return (

); } } ``` > 当然，你也可以将 Context 对象创建单独放在一个 js 文件中，并同时在包含 `Provider` 和 `Consumer` 的 js 文件中引入。事实证明，该方法是最优的方法，若将 Context 对象声明在 `Provider` 所在的 js 文件中，`Consumer` 在导入时可能会出错，原因不明。 ```js // ThemeButton.js // 只需要导入相应的 Context 对象即可 import {ThemeContext} from './App.js' export default function ThemedButton(props) { // 使用共享 Context 对象 const theme = useContext(ThemeContext); render() { return ; } } ``` ## useReducer + useContext 思想：将 useReducer 返回的 dispatch 函数作为 context 的 value，共享给深层子组件，子组件可以通过调用 dispatch 修改祖先组件的 state。 ```js // 定义初始化值 const initState = { name: '', pwd: '', isLoading: false, error: '', isLoggedIn: false, } // 定义state[业务]处理逻辑 reducer函数 function loginReducer(state, action) { switch(action.type) { case 'login': return { ...state, isLoading: true, error: '', } case 'success': return { ...state, isLoggedIn: true, isLoading: false, } case 'error': return { ...state, error: action.payload.error, name: '', pwd: '', isLoading: false, } default: return state; } } // 定义 context函数 const LoginContext = React.createContext(); function LoginPage() { const [state, dispatch] = useReducer(loginReducer, initState); const { name, pwd, isLoading, error, isLoggedIn } = state; const login = (event) => { event.preventDefault(); dispatch({ type: 'login' }); login({ name, pwd }) .then(() => { dispatch({ type: 'success' }); }) .catch((error) => { dispatch({ type: 'error' payload: { error: error.message } }); }); } // 利用 context 共享 dispatch return ( <...> ) } function LoginButton() { // 子组件中直接通过 context 拿到 dispatch，触发 reducer 修改 state const dispatch = useContext(LoginContext); const click = () => { if (error) { // 子组件可以直接 dispatch action dispatch({ type: 'error' payload: { error: error.message } }); } } } ``` useReducer 为修改 state 封装了统一的方法 dispatch，useContext 则为组件树数据共享提供了可能。useReducer 结合 useContext，通过 context 把 dispatch 函数提供给组件树中的所有组件使用 ，使得子组件可以通过 dispatch 函数操作祖先组件的 state，而不用通过 props 添加回调函数的方式一层层传递。 ## 总结 使用Context相比回调函数的优势： * 对比回调函数的自定义命名，Context的Api更加明确，我们可以更清晰的知道哪些组件使用了dispatch、应用中的数据流动和变化。这也是React一直以来单向数据流的优势。 * 更好的性能：如果使用回调函数作为参数传递的话，因为每次 render 函数都会变化，也会导致子组件 rerender。而 useReducer 中 React 会保证 dispatch 始终是不变的，因此不会引起 consumer 组件的 rerender。