ReactHook快速上車

来源:https://www.cnblogs.com/Jafeney/archive/2020/05/26/12962016.html
-Advertisement-
Play Games

React16.8開始內置了10個Hook,核心是2個: 狀態管理:useState 副作用管理:useEffect 有狀態的函數 useState 有狀態組件寫法: class Example extends React.Component { constructor(props) { super ...


React16.8開始內置了10個Hook,核心是2個:

  • 狀態管理:useState
  • 副作用管理:useEffect

有狀態的函數

useState

有狀態組件寫法:

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

無狀態組件寫法:

const Example = props => {
  const { count, onClick } = props;
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClick}>
        Click me
      </button>
    </div>
  )
}

hooks是有狀態的函數:

import { useState } from 'react';
const Example = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
    </div>
  )
}

註意,useState生成的setter在更新state的時候不會合併:

const [data, setData] = useState({ count: 0, name: 'abc' });   // name沒有被使用,應該分開聲明
useEffect(() => {
  // data: { count: 0, name: 'abc' } -> { count: 0 }
  setData({ count: 1 })
})

在我們的純函數組件里,每個useState都會生產一對state和stateSetter,我們無需考慮更多的狀態樹的設計和組件的劃分設計,邏輯代碼可以直接從根組件寫起。

我們應用的發展途徑大致分為以下3個階段,基於hook開發過程將更有彈性:

  • 前期farm:只需要把相關 state 組合到幾個獨立的 state 變數即可應付絕大多數情況
  • 中期gank:當組件的狀態逐漸變得多起來時,我們可以很輕鬆地將狀態的更新交給reducer來管理
  • 後期團戰:不光狀態多了,狀態的邏輯也越來越複雜的時候,我們可以幾乎0成本的將繁雜的狀態邏輯代碼抽離成自定義hook解決問題

高度靈活的redux,純粹無依賴

不同於真正的redux,在實際應用中,hook帶來了一種更加靈活和純粹的模式。現在我們可以用10行代碼實現一個全局的redux,也可以用2行代碼隨時隨地實現一個局部的redux:

10行代碼實現一個全局的redux:

import React from 'react';
const store = React.createContext(null);
export const initialState = { name: 'aa' };
export function reducer(state, action) {
  switch (action.type) {
    case 'changeName': return { ...state, name: action.payload };
    default: throw new Error('Unexpected action');
  }
}
export default store;

Provider根組件掛上:

import React, { useReducer } from 'react';
import store, { reducer, initialState } from './store';

function App() {
	const [state, dispatch] = useReducer(reducer, initialState);
    return (
    	<store.Provider value={{ state, dispatch }}>
      		<div />
      	</store>
    )
}

子組件調用:

import React, { useContext } from 'react';
import store from './store';

function Child() {
	const { state, dispatch } = useContext(store);
}

隨時隨地的一個局部redux:

import React, { useReducer } from 'react';
const initialState = { name: 'aa' };
function reducer(state, action) {
	switch (action.type) {
      case 'changeName': return { ...state, name: action.payload };
      default: throw new Error('Unexpected action');
    }
}

function Component() {
	const [state, dispatch] = useReducer(reducer, initialState);
  	...
}

自定義hook

當我們想在兩個函數之間共用邏輯時,我們會把它提取到第三個函數中。而組件和 hook 都是函數,所以也同樣適用這種方式。不同的是,hook 是有狀態的函數,它能實現以往純函數所不能做到的更高級別的復用——狀態邏輯的復用。

component寫法:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: undefined
    };
  }
  componentDidMount() {
    service.getInitialCount().then(data => {
      this.setState({ count: data });
    });
    service.getInitialName().then(data => {
      this.setState({ name: data });
    });
  }
  componentWillUnmount() {
    service.finishCounting().then(() => {
      alert('計數完成');
    });
  }
  addCount = () => {
    this.setState({ count: this.state.count + 1 });
  };
  handleNameChange = name => {
    this.setState({ name });
  };
  render() {
    const { count, name } = this.state;
    return (
      <div>
        <div>
          <p>You clicked {count} times</p>
          <button onClick={this.addCount}>Click me</button>
        </div>
        <Input value={name} onChange={this.handleNameChange} />
      </div>
    );
  }
}

hook寫法:

function useCount(initialValue) {
  const [count, setCount] = useState(initialValue);
  useEffect(() => {
    service.getInitialCount().then(data => {
      setCount(data);
    });
    return () => {
      service.finishCounting().then(() => {
        alert('計數完成');
      });
    };
  }, []);
  function addCount() {
    setCount(c => c + 1);
  }
  return { count, addCount };
}
function useName(initialValue) {
  const [name, setName] = useState(initialValue);
  useEffect(() => {
    service.getInitialName().then(data => {
      setName(data);
    });
  }, []);
  function handleNameChange(value) {
    setName(value);
  }
  return { name, handleNameChange };
}
const App = () => {
  const { count, addCount } = useCount(0);
  const { name, setName } = useName();
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={addCount}>Click me</button>
      <Input value={name} onChange={setName} />
    </div>
  );
};

如上,使用component的寫法里,count和name,還有與之相關的一票兒邏輯,散落在組件的生命周期和方法里。雖然我們可以將組件的state和變更action抽成公共的,但涉及到副作用的action,到最終還是繞不開組件的生命周期。但一個組件的生命周期只有一套,不可避免的會出現一些完全不相干的邏輯寫在一起。如此一來,便無法實現完全的狀態邏輯復用。

我們再看看使用hook的寫法,我們將count相關的邏輯和name相關的邏輯通過自定義hook,封裝在獨立且封閉的邏輯單元里。以往class組件的生命周期在這裡不復存在。生命周期是和UI強耦合的一個概念,雖然易於理解,但它天然距離數據很遙遠。而hook以一種類似rxjs模式的數據流訂閱實現了組件的副作用封裝,這樣的好處就是我們只需要關心數據。所以hook所帶來的,絕不僅僅只是簡化了state的定義與包裝。

自定義hook實現了狀態邏輯與UI分離,通過合理抽象自定義hook,能夠實現非常高級別的業務邏輯抽象復用

hook原理

let hooks, i;
function useState() {
  i++;
  if (hooks[i]) {
    // 再次渲染時
    return hooks[i];
  }
  // 第一次渲染
  hooks.push(...);
}
// 準備渲染
i = -1;
hooks = fiber.hooks || [];
// 調用組件
Component();
// 緩存 Hooks 的狀態
fiber.hooks = hooks;

本文由博客一文多發平臺 OpenWrite 發佈!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 由於工作需要,最近做了很多 BI 取數的工作,需要用到一些比較高級的 SQL 技巧,總結了一下工作中用到的一些比較騷的進階技巧,特此記錄一下,以方便自己查閱,主要目錄如下: SQL 的書寫規範 SQL 的一些進階使用技巧 SQL 的優化方法 SQL 的書寫規範 在介紹一些技巧之前,有必要強調一下規範 ...
  • https://blog.csdn.net/yiyele/article/details/80605909 一、生成數據表1、首先導入pandas庫,一般都會用到numpy庫,所以我們先導入備用:import numpy as npimport pandas as pd122、導入CSV或者xlsx ...
  • 準備工作 1.開啟伺服器 ··windows系統: 方法1.搜索服務,找到mysql並開啟. 方法2.如果安裝的是5.7版本,cmd中輸入: net start MySQL57 ··Mac系統: 系統偏好設置開啟mysql,然後命令行運行以下代碼出現base字樣即可: source .bash_pr ...
  • 新聞 1. "谷歌應用已全面支持Android和iOS的黑暗模式" 1. "谷歌Pixel 5確認無緣旗艦處理器而改用驍龍765G" 教程 1. "知識點 | ViewModel 四種集成方式" 1. "協程中的取消和異常 | 核心概念介紹" 1. "在 Android 上進行高刷新率渲染" 1. ...
  • 一套代碼達到以下效果: 打包不同applicationId能同時安裝在同一手機上 不同logo,app名稱, 不同第三方SDK接入配置(例如微信分享appid,激光推送appkey) 能區分debug和release配置 甚至不同的so文件,不同的依賴jar包 (待補充) 使用到的功能:produc ...
  • 通過#import <objc/runtime.h>我們可以找到: 1 /** 2 * Returns a specified instance method for a given class. 3 * 4 * @param cls The class you want to inspect. 5 ...
  • MD5: + (NSString *)md5:(NSString *)input { const char *cStr = [input UTF8String]; unsigned char digest[CC_MD5_DIGEST_LENGTH]; CC_MD5( cStr, (CC_LONG)s ...
  • 根據三大運營商出現的號段(號段來自百度百科) 判斷是否是手機號 + (BOOL)isMobile:(NSString *)str { NSString *MOBILE = @"^1(3[0-9]|4[579]|5[0-35-9]|6[2567]|7[0-35-8]|8[0-9]|9[189])\\d ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...