react 使用recoil 减少不必要的组件渲染

原文链接: react 使用recoil 减少不必要的组件渲染

上一篇: 解决增量矩阵缩放因子相乘时造成的计算错误导致动画合成时参数不对的问题

下一篇: css 使用transform-origin实现绕顶点旋转

https://recoiljs.org/docs/introduction/getting-started/

安装

yarn add recoil

这个库目前看来是将状态的set和get分离开, 可以精细化的控制组件对状态的操作, 进而避免重复渲染, 比如一个状态在A中只读, 在B中只写, 那么该状态变化时只需要更新A即可

使用useContext和useMemo 也可以达到一样的效果, 但是会很麻烦 ,so...懒....

A和B中,分别有两个状态, C和D分别去更改

可以看到, 两个状态更新时只会更新使用了该状态的组件, 对于有set的组件也是不更新的, 避免了一处修改, 全局更新的问题

import React, { useRef, useState } from "react";
import {RecoilRoot,atom,selector,useRecoilState,useRecoilValue,useSetRecoilState,
} from "recoil";const countA = atom({key: "countA", // unique ID (with respect to other atoms/selectors)default: 1, // default value (aka initial value)
});
const countB = atom({key: "countB", // unique ID (with respect to other atoms/selectors)default: 111, // default value (aka initial value)
});const A = () => {console.log("A render");const c = useRecoilValue(countA);return <div>A:{c}</div>;
};const B = () => {console.log("B render");const c = useRecoilValue(countB);return <div>B:{c}</div>;
};const C = () => {const set = useSetRecoilState(countA);console.log("C render");return (<div>C: <button onClick={() => set((v) => v + 1)}>inc A</button></div>);
};const D = () => {console.log("D render");const set = useSetRecoilState(countB);return (<div>{" "}C: <button onClick={() => set((v) => v + 1)}>inc A</button></div>);
};export default () => {return (<RecoilRoot><div><A></A><B></B><C></C><D></D></div></RecoilRoot>);
};

react 使用recoil 减少不必要的组件渲染相关推荐

不挂载组件渲染_让你的 React 组件性能跑得再快一点「实践」
作者:天泽转发链接:https://www.zoo.team/article/react-render 性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配 ...
React总结篇之六_React高阶组件
高阶组件的概念及应用以函数为子组件的模式这两种方式的最终目的都是为了重用代码,只是策略不同,各有优劣,开发者可以在实际工作中决定采用哪种方式. 一.高阶组件 1. 高阶组件(Higher Orde ...
React框架简介（JSX语法、组件、虚拟DOM渲染）
目录 React框架为什么要学习React React特点 React核心 JSX语法语法详解 React开发过程实际DOM 虚拟DOM React组件函数组件类组件虚拟DOM渲染过程 R ...
React 中高阶函数与高阶组件（上）
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
react避免子组件渲染_如何与React一起使用正确的方法来避免一些常见的陷阱
react避免子组件渲染 One thing I hear quite often is "Let's go for Redux" in our new React app. It ...
[react] 使用ES6的class定义的组件不支持mixins了，那用什么可以替代呢？
[react] 使用ES6的class定义的组件不支持mixins了,那用什么可以替代呢? HOC 高阶组件是一个以组件为参数并返回一个新组件的函数.HOC 运行你重用代码.逻辑和引导抽象.最常见的可 ...
[react] 举例说明什么是高阶组件(HOC)的反向继承
[react] 举例说明什么是高阶组件(HOC)的反向继承 import React from 'react';const hoc = (WrappedComponent) => {// 集成需 ...
[react] 举例说明什么是高阶组件(HOC)的属性代理
[react] 举例说明什么是高阶组件(HOC)的属性代理 function HOC(WrappedComponent) {return class HOC extends Component {re ...
[react] 使用React的memo和forwardRef包装的组件为什么提示children类型不对？
[react] 使用React的memo和forwardRef包装的组件为什么提示children类型不对? 过去使用Component.FC等类型定义组件时一般不需要我们定义props里childr ...

react 使用recoil 减少不必要的组件渲染

react 使用recoil 减少不必要的组件渲染相关推荐

最新文章

热门文章