首页 > 其他分享 >react hooks 渲染性能

react hooks 渲染性能

时间:2023-03-17 18:22:53浏览次数:50  
标签:React const name 渲染 hooks react 组件 return

目录

重复渲染

简介:在 react 中 props 和state改变时,子组件会重新渲染

React.memo()

简介:子组件不操作props和state 使用 React.memo() 控制子组件重复渲染
  • React v16.6引进来的新属性,用来控制函数组件的重新渲染
  • 将组件作为函数(memo)的参数,函数的返回值(Child)是一个新的组件

例子

import * as React from "react";
import { View, Button, Text } from "@tarojs/components";

const UseChild: React.FC = React.memo(() => {
  console.log("渲染了11111");
  return <View>子1</View>;
});

const UseChild2: React.FC = React.memo(() => {
  console.log("渲染了2222");
  return <View>子2</View>;
});

const UseTest: React.FC = () => {
  const [state, setState] = React.useState(0);
  const add = () => {
    // 只会渲染一次
    setState(val => val + 1);
  };
  return (
    <View>
      <Text>{state}</Text>
      <Button onClick={add}>支付</Button>
      <UseChild></UseChild>
      <UseChild2></UseChild2>
    </View>
  );
};

export default UseTest;

React.useMemo

简介:如果参数是对象,使用 React.useMemo 控制子组件重复渲染

例子

import * as React from "react";
import { View, Button, Text } from "@tarojs/components";

// === 父组件 ===
const UseTest: React.FC = () => {
  const [count, setCount] = React.useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  // 备注:如果是 useState 解构的 子组件不会重复渲染
  //   const [userInfo, setUserInfo] = useState({ name: "小明", age: 18 });

  // const userInfo = { name: "小明", age: 18 }; 子组件会重复渲染
  const userInfo = React.useMemo(() => ({ name: "小明", age: 18 }), []);
  return (
    <View>
      <Button onClick={increment}>点击次数:{count}</Button>
      <UseChild userInfo={userInfo}></UseChild>
    </View>
  );
};

// === 子组件 ===
const UseChild: any = React.memo((props: any) => {
  const { userInfo } = props;
  console.log("渲染了11111", userInfo);
  return (
    <View>
      <View>{userInfo.name}</View>
      <View>{userInfo.age}</View>
    </View>
  );
});

export default UseTest;

React.useMemo 也可以绑定 jsx和tsx对象

const TestChild: React.FC = React.memo(props => {
  console.log("渲染 1111");
  return (
    <View>
      <Text>child 组件 </Text>
      {props.children}
    </View>
  );
});

const TestParent: React.FC = () => {
  const [state, setState] = React.useState(0);
  // 子组件只会渲染一次
  const el = React.useMemo(() => {
    return <View>22222</View>;
  }, []);
  return (
    <View>
      <Button onClick={() => setState(state + 1)}>点击次数{state}</Button>
      <TestChild>{el}</TestChild>
    </View>
  );
};

React.useCallback()

  • 改变父元素的state值,近而渲染父组件
  • 父组件渲染时,会重新渲染onclick事件,近而连锁反应,被动传值给子组件,导致子组件渲染
  • 如果props传入的是 基础数据类型,子组件不会渲染

例子

import * as React from "react";
import { View, Button, Text } from "@tarojs/components";

// === 父组件 ===
const UseTest: React.FC = () => {
  const [name, setName] = React.useState("zhangds");

  // 会重复渲染子组件
  //   const click = () => {
  //     setName(name);
  //   };

  // 只会渲染一次
  const click = React.useCallback((name: string) => {
    setName(name);
  }, []);

  return (
    <View>
      <Text>{name}</Text>
      <UseChild name="zhangds" click={click}></UseChild>
    </View>
  );
};

// === 子组件 ===
const UseChild: any = React.memo((props: any) => {
  const { name, click } = props;
  console.log("渲染了11111", name);
  return (
    <View>
      <Button onClick={() => click("zhudachang")}>sss</Button>
    </View>
  );
});

export default UseTest;

标签:React,const,name,渲染,hooks,react,组件,return
From: https://www.cnblogs.com/sjie/p/17227786.html

相关文章

  • 完整手写react第六天
       常见的触发更新的方式:ReactDOM.createRoot().render(或老版的ReactDOM.render)this.setStateuseState的dispatch方法我们希望实现一套统一的更新机制,他的特......
  • react
    一、脚手架cra(create-react-app)安装脚手架(已安装了新版本的node.js)npxcreate-react-app项目名称脚手架不要安装在本地,因为react脚手架升级很快,一旦官网升级,我们的......
  • React使用createContext搭配useReducer模拟Redux
    1.准备importReact,{useReducer}from'react';//import{useIntl}from'react-intl';//用于国际化后续在写入暂时无效2.用于存放数据的函数constiniti......
  • react定义图片预览
    1.控制图片的信息imgScale:'100%',//图片放大缩小imgTransform:'',//旋转imgCurrent:0,//当前的旋转x:0,//x移动y:0,//y移动2.执行用的函数......
  • react hooks + ts 封装组件
    reacthooks+ts组件封装简介在react使用ts封装组件,需要注意类型,使用forwardRef方法包起来子组件import*asReactfrom"react";import"./style.scss";interf......
  • Vue.js 列表渲染-列表排序
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>列表排序</title> <scripttype="text/javascript"src="../js/vue.js"></script> </head>......
  • Vue.js 列表渲染-列表过滤
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>列表过滤</title> <scripttype="text/javascript"src="../js/vue.js"></script> </head>......
  • Vue.js 列表渲染-key的作用与原理
    视频虚拟DOM对比算法diff<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>key的原理</title> <scripttype="text/javascript"src="../js/vue......
  • Vue.js 列表渲染-基本列表
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>基本列表</title> <scripttype="text/javascript"src="../js/vue.js"></script> </head>......
  • react警告:Warning: [antd: Menu] children will be removed in next major version. P
    这是由于antv4.20+优化了导航菜单Menu的使用方式,采用优化后的方式使用菜单组件就可以了。更新前:<MenuonClick={this.handleClick}style={{wi......