兩個(gè)相互關(guān)聯(lián)的組件想要共享狀態(tài)，我們會(huì)想到提升狀態(tài)到倆組件最近的父級(jí)節(jié)點(diǎn)

一、通常我會(huì)會(huì)在父級(jí)設(shè)置狀態(tài)，兩個(gè)子組件共享父組件的狀態(tài)，通常的做法是：

1. 父組件設(shè)置狀態(tài)，倆子組件接收props ??

?... 這種情況會(huì)是：其中任何一個(gè)子組件的改變，都會(huì)造成整個(gè)父級(jí)組件的重渲染 render。

2. 父組件不設(shè)置狀態(tài)，倆子組件不接收props， 組件樹的頂層使用 React Context來(lái)共享數(shù)據(jù) ??

?... 這種情況會(huì)是：只要提供給 Provider 的值發(fā)生變化，所有消費(fèi)到了 Provider 的后代組件都會(huì)發(fā)生重渲染 render。

二、我們要怎樣才能共享狀態(tài)，又不會(huì)造成重渲染 render???，這里我們就要用的 useRef

“當(dāng) ref 對(duì)象內(nèi)容發(fā)生變化時(shí)，useRef 并不會(huì)通知變更。變更 .current 屬性不會(huì)引發(fā)組件 重新渲染?！?—— React 文檔 1. 父組件創(chuàng)建ref 對(duì)象，倆子組件接收父組件創(chuàng)建的ref，這樣子組件拿到變更 .current ，下面通過(guò)一個(gè)??：(這里我們通過(guò)Provider的)

一個(gè)簡(jiǎn)單的星期英文翻譯：

translateContext.jsx

translate.jsx

import { useState } from 'react';

import { TranslateProvider, useTranslateContext } from './translateContxt';

const dict = {

? ? '周一': 'Monday',

? ? '周二': 'Tuesday',

? ? '周三': 'Wednesday',

? ? '周四': 'Thursday',

? ? '周五': 'Friday',

? ? '周六': 'Saturday',

? ? '周日': 'Sunday',

}

const CnTranslate = () => {

? ? const { translateRef } = useTranslateContext();

? ? const onChange = (e) => {

? ? ? ? const { value } = e.target;

? ? ? ? translateRef.current.value = value;

? ? }

? ? const translate = () => {

? ? ? ? translateRef.current.setTranslate(false);

? ? ? ? setTimeout(() => {

? ? ? ? ? ? translateRef.current.setTranslate(true)

? ? ? ? }, 100)

? ? }

? ? return (

? ? ? ? <div style={{ flex: '1', background: "#fff", margin: '10px', textAlign: 'center' }}>

? ? ? ? ? ? <input type="text" onChange={onChange}/>{' '}

? ? ? ? ? ? <button onClick={translate}>翻譯</button>

? ? ? ? </div>

? ? )

}

const EnTranslate = () => {

? ? const [translate, setTranslate] = useState(false);

? ? const { translateRef } = useTranslateContext();

? ? translateRef.current.setTranslate = setTranslate;

? ? return (

? ? ? ? <div style={{ flex: '1', background: "#fff", margin: '10px', textAlign: 'center'}}>

? ? ? ? ? ? {translate && (<span>{dict[translateRef.current.value]}</span>)}

? ? ? ? </div>

? ? )

}

const Translate = () => {

? ? return (

? ? ? ? <div style={{ display: 'flex', lineHeight: '160px', width: '600px', background: "#4787de", margin: '50px'}}>

? ? ? ? ? ? <TranslateProvider>

? ? ? ? ? ? ? ? <CnTranslate/>

? ? ? ? ? ? ? ? <EnTranslate/>

? ? ? ? ? ? </TranslateProvider>

? ? ? ? </div>

? ? )

}

export default Translate;

了解更多，請(qǐng)點(diǎn)擊：https://www.bilibili.com/video/BV14h411f78E

作者：xphjj

鏈接：https://juejin.cn/post/6909328364406833160

來(lái)源：掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。