zoukankan      html  css  js  c++  java
  • [React] Display Computed Data Using Recoil Selectors in React

    In this lesson, we're going to show how RecoilJS selectors are used to display computed data in React. While atoms are the go-to state objects in Recoil, selectors are the ideal choice when data can be computed based on existing state - like displaying the price of a restaurant order. And your selector output always remains up to date - just subscribe to it using one of the RecoilJS hooks.

     Define a 'atom':
    const order = atom({
      key: "order",
      default: ["garlic bread"] // on the house!
    });

    Use a atom:

    import { atom, useRecoilValue, selector } from "recoil";
    
      const myOrder = useRecoilValue(order);
    
      return (
        <div className="App">
          <h1>The Brunch Place</h1>
          {myOrder.map((food, i) => (
            <p key={i}>{food}</p>
          ))}
        </div>
      );

    Compute value based on state: using selector:

    import { atom, useRecoilValue, selector } from "recoil";
    
    const orderInfo = selector({
      key: "orderInfo",
      get: ({ get }) => {
        return {
          totalPrice: get(order)
            .map((food) => priceList[food])
            .reduce((current, sum) => current + sum, 0)
        };
      }
    });

    Use selector:

    const orderStats = useRecoilValue(orderInfo);
      <h4>Total Price: ${orderStats.totalPrice} </h4>

    Full code:

    import React from "react";
    import "./styles.css";
    import { atom, useRecoilValue, selector } from "recoil";
    
    const priceList = {
      coffee: 2,
      "garlic bread": 0,
      pancakes: 10
    };
    
    const order = atom({
      key: "order",
      default: ["garlic bread"] // on the house!
    });
    
    const orderInfo = selector({
      key: "orderInfo",
      get: ({ get }) => {
        return {
          totalPrice: get(order)
            .map((food) => priceList[food])
            .reduce((current, sum) => current + sum, 0)
        };
      }
    });
    
    export default function App() {
      const myOrder = useRecoilValue(order);
      const orderStats = useRecoilValue(orderInfo);
    
      return (
        <div className="App">
          <h1>The Brunch Place</h1>
          {myOrder.map((food, i) => (
            <p key={i}>{food}</p>
          ))}
          <h4>Total Price: ${orderStats.totalPrice} </h4>
        </div>
      );
    }
  • 相关阅读:
    胡小兔的良心莫队教程:莫队、带修改莫队、树上莫队
    51nod 1290 Counting Diff Pairs | 莫队 树状数组
    Git的简单使用
    使用canvas制作五子棋游戏
    axios的Get和Post方法封装及Node后端接收数据
    mongodb初始化并使用node.js实现mongodb操作封装
    nodeJs实现微信小程序的图片上传
    CSS中text-shadow的几个好看的文字demo及其代码
    博客园自定义样式
    input输入框添加内部图标
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13488392.html
Copyright © 2011-2022 走看看