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

原创
10/12 23:17
阅读数 108

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>
  );
};

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部