码迷,mamicode.com
首页 > 其他好文 > 详细

[React Recoil] Use selectors to calculate derived data based on state stored within a Recoil atom

时间:2020-05-16 20:48:21      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:stat   pps   tps   cti   button   display   cli   ever   base   

Recoil allows us to use atoms in order to store pieces of state. More often than not in our apps we need to use data that derives from our application state (for instance to multiply height and width stored within a state to calculate area of an element).

Luckily Recoil provides us with a powerful tool to automatically re-calculate derived state value whenever an piece of state changes - selectors.

selector is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated.

In this quick lesson we‘re going to learn how to use a selector in order to automatically calculate a square of a number whenever a value stored within an atom is going to change

 

  
import React from "react";
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from "recoil";
import "./App.css";

const numState = atom({
  key: "numState",
  default: 0,
});

const squareState = selector({
  key: "squareState",
  get: ({ get }) => {
    return get(numState) ** 2;
  },
});

function Counter() {
  const [number, setNumber] = useRecoilState(
    numState
  );

  return (
    <button
      onClick={() => setNumber(number + 1)}
    >
      Increment!
    </button>
  );
}

function Square() {
  const squareNumber = useRecoilValue(
    squareState
  );
  return <div>Square: {squareNumber}</div>;
}

function Display() {
  const number = useRecoilValue(numState);
  return <div>Number: {number}</div>;
}

function App() {
  return (
    <RecoilRoot>
      <div className="App">
        <h1>Recoil!</h1>
        <Counter />
        <Display />
        <Square />
      </div>
    </RecoilRoot>
  );
}

export default App;

 

[React Recoil] Use selectors to calculate derived data based on state stored within a Recoil atom

标签:stat   pps   tps   cti   button   display   cli   ever   base   

原文地址:https://www.cnblogs.com/Answer1215/p/12901763.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!