日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

本系列文章 "React 狀態(tài)管理" 也是希望能幫助到大家了解不同狀態(tài)管理方案(React 官方本身提供的及社區(qū)的一些庫)能做的事情有哪些及優(yōu)略點。

成都創(chuàng)新互聯(lián)專注于瑯琊網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供瑯琊營銷型網站建設，瑯琊網站制作、瑯琊網頁設計、瑯琊網站官網定制、小程序制作服務，打造瑯琊網絡公司原創(chuàng)品牌,更為您提供瑯琊網站排名全網營銷落地服務。

本篇先從 React 本身提供的組件狀態(tài)管理開始。React 的組件狀態(tài)分為類組件時代的 和當下函數組件的 hooks API 管理數據狀態(tài)。

類組件

State類組件將組件內所有的狀態(tài)放在一個 state 中管理： 獲取狀態(tài)數據、 更新狀態(tài)數據。

import React from 'react';

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

  render() {
    return 

      
count: {this.state.count}

       
        this.setState({ count: this.state.count + 1 })
      }> 類組件計數 
    

  }
}
export default State;

函數組件 useState

React 16.8 發(fā)布后，函數組件成為熱門選擇，組件狀態(tài)使用 useState() 函數，相比類組件狀態(tài)拆分的更細并且每次更新狀態(tài)變量都是替換而不是合并。

如果更新依賴于先前的狀態(tài)，可以將函數傳遞給 setState，并返回一個更新后的值 setState(preState => newState)。 熟悉 Redux 的朋友看起來也許不陌生，該函數是不是更像一個 reducer 函數？

示例：useState 實現計數器增、減、重置。

import { useState } from 'react';
const State = () => {
  const [count, setCount] = useState(0);

  return 

    
計數器 count: {count}

     setCount(count + 1)}> 增 
     setCount(preCount => preCount - 1)}> 減 
     setCount(0)}> 重置 
  

}
export default State;

函數組件 useReducer

剛開始看到 useReducer 時，還聯(lián)想和 Redux 之間有什么關系?需要注意的是和 Redux 完全不是一個東西，useReducer 是 React Hooks 提供的一個 API，如果熟悉 Redux 可能看起來會更熟悉。

useReducer 是 useState 的替代方案，主要用來處理一些邏輯比較復雜的 state 或 下一個 state 依賴于前一個 state 等。

Example：使用 useReducer 重寫上面的計數器示例，可以和上面的 useState 做一個對比。

import { useReducer } from "react"

const COUNT_INCREMENT = 'COUNT_INCREMENT';
const COUNT_DECREMENT = 'COUNT_DECREMENT';
const COUNT_RESET = 'COUNT_RESET';

const initialState = {
  count: 0,
};

const reducer = (state, action) => {
  switch (action.type) {
    case COUNT_INCREMENT:
      return { count: state.count + 1 };
    case COUNT_DECREMENT:
      return { count: state.count - 1 };
    case COUNT_RESET:
      return { count: initialState.count };
    default:
      return state;
  }
};

const State = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return 

    
計數器 count: {state.count}

     dispatch({ type: COUNT_INCREMENT })}> 增 
     dispatch({ type: COUNT_DECREMENT })}> 減 
     dispatch({ type: COUNT_RESET })}> 重置 
  

}

export default State;

useReducer 實現 Todos

使用 useReducer 實現一個稍微復雜點的功能，例如 Todos，有創(chuàng)建、更新、移除待辦事項功能，你可以試想下如果換做 useState 該怎么處理？會不會更麻煩？

減速機實現

在 目錄下實現 reducer 需要的邏輯，定義的 initialState 變量、reducer 函數都是為 useReducer 這個 Hook 做準備的，這里的 reducer 函數是一個純函數。

// src/reducers/todos-reducer.jsx
export const TODO_LIST_ADD = 'TODO_LIST_ADD';
export const TODO_LIST_EDIT = 'TODO_LIST_EDIT';
export const TODO_LIST_REMOVE = 'TODO_LIST_REMOVE';

const randomID = () => Math.floor(Math.random() * 10000);
export const initialState = {
  todos: [{ id: randomID(), content: 'todo list' }],
};

const reducer = (state, action) => {
  switch (action.type) {
    case TODO_LIST_ADD: {
      const newTodo = {
        id: randomID(),
        content: action.payload.content
      };
      return {
        todos: [ ...state.todos, newTodo ],
      }
    }
    case TODO_LIST_EDIT: {
      return {
        todos: state.todos.map(item => {
          const newTodo = { ...item };
          if (item.id === action.payload.id) {
            newTodo.content = action.payload.content;
          }
          return newTodo;
        })
      }
    }
    case TODO_LIST_REMOVE: {
      return {
        todos: state.todos.filter(item => item.id !== action.payload.id),
      }
    }
    default: return state;
  }
}

export default reducer;

創(chuàng)建 Todos 組件

下面進行待辦事項組件開發(fā)，細分為 TodoAdd、Todo、Todos 三個組件，在 Todos 組件內使用 useReducer 獲取組件需要的狀態(tài)(state)和更新狀態(tài)的方法(dispatch)。

添加、更新、刪除待辦事項行為分別在 TodoAdd、Todo 組件中，以下我們使用的是 React 推薦的 組合組件模式，可以通過 props 從父組件傳遞數據到子組件。

import { useReducer, useState } from "react";
import reducer, { initialState, TODO_LIST_ADD, TODO_LIST_EDIT, TODO_LIST_REMOVE } from "../../reducers/todos-reducer";

const TodoAdd = ({ dispatch }) => {
  const [content, setContent] = useState('');

  return <>
     setContent(e.target.value)} />
     {
      dispatch({ type: TODO_LIST_ADD, payload: { content } })
    }}>
      添加
    
  
};

const Todo = ({ todo, dispatch }) => {
  const [isEdit, setIsEdit] = useState(false);
  const [content, setContent] = useState(todo.content);

  return 

    {
      !isEdit ? <>
        {todo.content}
         setIsEdit(true)}> 編輯 
         dispatch({ type: TODO_LIST_REMOVE, payload: { id: todo.id } })}> 刪除 
       : <>
         setContent(e.target.value) } />
         {
          setIsEdit(false);
          dispatch({ type: TODO_LIST_EDIT, payload: { id: todo.id, content } })
        }}> 更新 
         setIsEdit(false)}> 取消 
      
    }
  

}

const Todos = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return <>
    
    {
      state.todos.map(todo =>         key={todo.id}
        todo={todo}
        dispatch={dispatch}
      />)
    }
  
}

export default Todos;

總結

useState 適合定義一些單一的狀態(tài)，useReducer 適合邏輯比較復雜的狀態(tài)。

一個好的經驗法則是："如果狀態(tài)是基本的數據類型(字符串、數值型、布爾型)可以選擇 useState，如果是數組或對象等其它復雜的類型或復雜邏輯時最好選擇 useReducer"。

但是兩者都是組件的狀態(tài)管理，當多個組件協(xié)同工作時不得不面對組件間 "數據通信" 問題。

React 組件數據狀態(tài)流轉是一個 "單項數據流" 的理念。簡單的組件可以通過 props 傳遞數據狀態(tài)，當組件過多時，層層 Props 傳遞的方式顯的就有點過于繁瑣了，不易維護。

本文名稱：React狀態(tài)管理—useState和useReducer如何選擇？
標題來源：http://www.5511xx.com/article/ccedijg.html