知识分享！react性能优化之render
两个相互关联的组件想要共享状态，我们会想到提升状态到俩组件最近的父级节点
一、通常我会会在父级设置状态，两个子组件共享父组件的状态，通常的做法是：
1. 父组件设置状态，俩子组件接收props 🤔
... 这种情况会是：其中任何一个子组件的改变，都会造成整个父级组件的重渲染 render。
2. 父组件不设置状态，俩子组件不接收props， 组件树的顶层使用 React Context来共享数据 🤔
... 这种情况会是：只要提供给 Provider 的值发生变化，所有消费到了 Provider 的后代组件都会发生重渲染 render。
二、我们要怎样才能共享状态，又不会造成重渲染 render🤔️，这里我们就要用的 useRef
“当 ref 对象内容发生变化时，useRef 并不会通知变更。变更 .current 属性不会引发组件 重新渲染。” —— React 文档 1. 父组件创建ref 对象，俩子组件接收父组件创建的ref，这样子组件拿到变更 .current ，下面通过一个🌰：(这里我们通过Provider的)
一个简单的星期英文翻译：
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;
了解更多，请点击：https://www.bilibili.com/video/BV14h411f78E
作者：xphjj
链接：https://juejin.cn/post/6909328364406833160
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
