React_练习Demo__理财计算器

Demo演示

Demo在线地址

理财计算器-GitHub

Demo主要涉及知识点

useState

import { useState } from "react";
//..
const [inputsInfo, setInputsInfo] = useState(baseInputs);

• 属于 React Hooks，导入 该方法定义 组件级别 的状态值，
• 该方法返回两个参数，第一个为状态值，第二个为状态更新函数
• 注意：更新状态值如果依赖于前置状态值，不要 使用静态定义，采用 状态更新函数的内置传参，该参数为最新的状态值

  const getInputsInfo = (infos) => {
    setInputsInfo((prevInputsInfo) => {
      return { ...prevInputsInfo, ...infos };
    });
  }; 
  

• 注意：每次 setStateHandler调用 都会 触发当前状态定义 所在组件的重新渲染，借助这一特性可以在组件作用域执行条件判断等逻辑
• 注意：多个states 的改变 会融合为一次执行，不会重复 触发组件，因此可以独立定义不同的state

条件渲染

方式一： if/else设置 返回值,可设置 辅助变量，也可直接 返回对应JSX组件

  let baseList = (
    <table className={styles.result}>
    //...
    </table>
  );
  if (!isCalculated)
    baseList = (
      <table className={styles.result}>
        //..
      </table>
    );
  return baseList;

方式二：三元表达式

return (  
    <li className="item">  
        {isPacked ? name + ' ✔' : name}  
    </li>  
);

方式三：逻辑与&&

return (  
    <li className="item">  
        {name} {isPacked && '✔'}  
    </li>  
);

循环渲染 key

每个循环渲染的组件必须有 key 属性，确保React能够 正确匹配 每个独立唯一的子元素，在插入删除元素时，保证 更新渲染 正确的DOM树，

Demo源码

理财计算器-GitHub