react 性能优化之：react.memo 有效阻止父组件更新带来的子组件也重新渲染的问题。_react 父组件更新如何阻止子组件更新_这个昵称也不能用吗？的博客

相关文章推荐

腼腆的卡布奇诺 · React应用报错：UncaughtInva ...· 2 月前 ·

面冷心慈的帽子 · react-dnd实现拖拽API学习_exp ...· 2 月前 ·

酷酷的鸵鸟 · React中如何动态添加和删除元素_reac ...· 12 小时前 ·

阳刚的饭盒 · 叶尔夏提·吐尔逊拜_伊犁哈萨克自治州人民政府· 4 月前 ·

神勇威武的草稿本 · 伊力塔-林业与生物技术学院· 4 月前 ·

长情的跑步机 · 一键告别APP和手环！手机自带的睡眠监测功能 ...· 6 月前 ·

豪情万千的茶叶 · 盗可道 - 🌈️包子漫畫· 1 年前 ·

八块腹肌的数据线 · 2021，与您共启一城鲜美！· 1 年前 ·

如果父组件的state发生变化，那么就需要重新render。其下的子组件即使没有用到此state，也会跟着重新render。性能受影响。
现有方法 react.memo 能实现，只有当子组件的 props里的数据发生变化后，才会重新render。

注： react.memo 此方法是浅比较。

父组件的input框输入的时候，会引起 inp_value 的变化。必然引起父组件的重新render。但是此时并没有引起子组件的render

案例中，我使用了usecallback，第二个参数传递空数组，生成了一个不会随着任何state变化而变化的函数 fa_callback ，此函数传递给子组件。
同理test_value一个当父组件更新时不会变化的普通state，传递给子组件。

export default function Reactuse() { const [inp_value, setinp_value] = useState('123'); const [test_value, settest_value] = useState('456'); // 这个函数没有依赖项，不会被更新。即使此组件重新渲染 const fa_callback = useCallback(() => { console.log('父组件的useCallback函数 ------------ '); }, []); useEffect(() => { console.log(inp_value, 'inp_value变了'); }, [inp_value]); return ( <input type="text" value={inp_value} onChange={(e) => { setinp_value(e.target.value); //一个不会发生变化的函数fa_callback 和一个未变化的数据test_value <Test3 fa_callback={fa_callback} test_value ={test_value}/>

import React, { useState, useEffect } from 'react';
import eventEmmiter from '../config/tools';
function Test3(props) {
//下面这句执行就说明，子组件重新渲染了
	console.log('组件3  didupdata -----------');
	useEffect(() => {
		console.log('组件3  didmount -----------');
	}, []);
	return (
		<div style={{ backgroundColor: 'pink', width: '300px', height: '200px' }}>
			子组件3 ！！！
			<button
				onClick={() => {
					props.fa_callback();
				点击执行父组件的方法
			</button>
//下面是重点！！！
export default React.memo(Test3);
如图我在输入框里输入文字，inp_value变化了，但是组件3并没有重新render 

 下图是没使用 memo的情况 
React.memo的第二个参数！
 
function MyComponent(props) {
  /* 使用 props 渲染 */
function areEqual(prevProps, nextProps) {
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
export default React.memo(MyComponent, areEqual);
借用大佬的话 
 useCallback 是要配合子组件的 shouldComponentUpdate 或者 React.memo
 一起来使用的，否则就是反向优化。 
                    前言:如果父组件的state发生变化，那么就需要重新render。其下的子组件即使没有用到此state，也会跟着重新render。性能受影响。现有方法  react.memo 能实现，只有当子组件的 props里的数据发生变化后，才会重新render。注：此方法是浅比较。父组件父组件的input框输入的时候，会引起 inp_value 的变化。必然引起父组件的重新render。但是此时并没有引起子组件的renderexport default function Reactuse() {	co
				React-textarea-自动完成 :memo:
 增强 textarea 以实现自动完成功能。
 这个包提供了 React 组件来在关于 textarea 自动完成的评论中实现 GitHub 的类似功能。 例如，它可以用于表情符号自动完成或@提及。 渲染功能（用于显示由该 textarea 增强的文本）超出了本包的范围，应单独解决。
浏览器支持
 浏览器/边缘
 火狐浏览器
 Chrome合金
 苹果浏览器
 iOS Safari
IE11，边缘
最后 2 个版本
最后 2 个版本
最后 2 个版本
最后 2 个版本
最后 2 个版本
最后 2 个版本
此模块通过分发，应作为项目的dependencies之一安装： 
 yarn add @webscopeio/react-textarea-autocomplete
或者有可用的 UMD 构建。 以这支笔为例。
本文只介绍函数式组件特有的性能优化方式，类组件和函数式组件都有的不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是蛮难的。
有过 React 函数式组件的实践，并且对 hooks  有过实践，对 useState、useCallback、useMemo API 至少看过文档，如果你有过对类...
				需求：父组件发送请求后，根据返回数据实时更新部分state，子组件实时检测跟随跟新
1、可以使用利用react的componentWillReceiveProps方法
子组件中增加
componentWillReceiveProps(nextProps:any){
     this.setState({
         reuploadFlag: nextProps.reuploadFlag,
         successFlag: nextProps.successFlag,
				forceUpdate不会导致shouldComponentUpdate的触发4.判断步骤：
如果 PureComponent 里有 shouldComponentUpdate 函数的话，直接使用 shouldComponentUpdate 的结果作为是否更新的依据。没有 shouldComponentUpdate 函数的话，才会去判断是不是 PureComponent ，是的话再去做 shallowEqual 浅比较。
PureComponent不可滥用，他使用在class组件内，只有那些状态和属性不
class组件
使用shouldComponentUpdate生命周期，return false
	继承React.PureComponent只要prop没有改变(浅比较)，就不会执行render函数
函数式组件
使用React.memo包裹组件函数，props没有改变就不会执行函数
	使用React.memo包裹函数的同时传入比较函数作为第二个参数，return true，组件函数就不会执行
在jsx的属性（包括事件）定义中，讲能提取的属性值提到外层
				可以看到初次渲染时，所有的组件都会被执行一次，  当点击按钮时，父组件传递给子组件A的props值发生变化导致A组件又被重新渲染一次，接下来仅仅是父组件发生变化，当父组件的值为4的时候会再次导致子组件A的props值发生变化导致子组件A再次被重新渲染，因为孙组件B没有被传入props，导致其只有在初次渲染的时候被被渲染，后面即使父组件发生变化，其也不会重新渲染，具体的过程如上图所示。React.memo()是一个高阶组件，它接收另一个组件作为参数，并且会返回一个包装过的新组件，包装过的新组件就会。
state更新，用setState()更新即可在componentWillReceiveProps()生命周期中更新
componentWillReceiveProps(nextProps){
   	this.setState({
   		data: nextProps.data 
props更新，这种情况适
function ParentComponent() {
  const [shouldRenderChild, setShouldRenderChild] = useState(true);
  function handleButtonClick() {
    // 点击按钮时，切换 shouldRenderChild 的值
    setShouldRenderChild(!shouldRenderChild);
  return (
      <button onClick={handleButtonClick}>Toggle child component</button>
      {shouldRenderChild && <ChildComponent />}
function ChildComponent() {
  return <div>Child component</div>;
在上面的示例中，`ParentComponent` 组件中定义了一个名为 `shouldRenderChild` 的状态变量，初始值为 `true`，表示要渲染子组件。在 `ParentComponent` 组件中，可以在需要渲染子组件的地方使用条件渲染来控制子组件的渲染。在上面的代码中，我们使用了 `shouldRenderChild && <ChildComponent />` 的语法来实现子组件的条件渲染，当 `shouldRenderChild` 为 `true` 时，渲染 `ChildComponent` 组件，否则不渲染。
在 `handleButtonClick` 函数中，调用 `setShouldRenderChild` 来切换 `shouldRenderChild` 的值，从而实现在父组件中阻止子组件的渲染。
需要注意的是，在使用条件渲染时，如果要渲染的子组件比较复杂，可以将子组件的渲染逻辑单独提取到一个函数中，以提高代码的可读性和可维护性。
				错误解决 node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules
					24038