React state结构设计原则示例详解

import { useState } from 'react';
function ComA() {
  // bad case 
  const [x, setX] = useState<number>(0);
  const [y, setY] = useState<number>(0);
  // good case
  const [position, setPosition] = useState({ x: 0, y: 0 });
  return (
    <div>
      <div style={{
          position: 'absolute',
          backgroundColor: 'red',
          borderRadius: '50%',
          transform: `translate(${x}px, ${y}px)`,
          left: -10,
          top: -10,
          width: 20,
          height: 20,
        }} />
    </div>
    );
}

import { useState } from 'react';
// bad  case
function ComA() {
  // 表示编辑状态
  const [isWritting, setIsWritting] = useState(true);
  // 表示是否保存
  const [isSave, setIsSave] = useState(fasle);
  // 其他状态
  const [isComplete, setIsComplete] = useState(false);
  return (
    //...
  );
}
// 这中间 isWriting 和 isSave 是冲突的。也就是说两个state存在竞态，有且仅有一个是真值。
// combine mutilate state ingroup 
function ComB() {
  const [status, setStatus] = useState<'writing' | 'save' | 'complete'>('writing');
  return (
    // ...
  );
}

export default function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [fullName, setFullName] = useState('');
  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
    setFullName(e.target.value + ' ' + lastName);
  }
  function handleLastNameChange(e) {
    setLastName(e.target.value);
    setFullName(firstName + ' ' + e.target.value);
  }
  return (
    <>
      <h2>Let's check you in</h2>
      <label>
        First name:{' '}
        <input
          value={firstName}
          onChange={handleFirstNameChange}
        />
      </label>
      <label>
        Last name:{' '}
        <input
          value={lastName}
          onChange={handleLastNameChange}
        />
      </label>
      <p>
        Your ticket will be issued to: <b>{fullName}</b>
      </p>
    </>
  );
}
// fullname  完全可以由 firstName 和 lastName 拼接出来，使用单独的 state 来保存计算结果是多余的。

import { useState } from 'react';
const defaultData = [
    { title: 'Tom', id: 0 },
    { title: 'Sam', id: 1 },
    { title: 'Dodo', id: 2 },
    { title: 'Piker', id: 3 },
];
function ComA() {
    const [data, setData] = useState(defaultData);
    const [current, setCurrent] = useState(data[0]);
    function handleClick(item) {
      setCurrent(item);
    }
    function handleInput(id, value) {
      const newData = data.map((item)=>{
        if (id === item.id) {
          return { ...item, title: value };
        }
        return item;
      })
    }
  return (
    <>
      <ul>
        {
          data.map((item) => {
            return (
              <li key={item.id}>
                <input value={item.title} onChange= {({target})=>{ handleInput(item.id, target.value); }}/>
                <button onClick={()=>{ handleClick(item) }}>选中</button>
              </li>
            );
          })
        }
      </ul>
      <p>当前选中：{current.title}</p>
     </>
  );
}
// 问题： 当点击 “选中” 按钮后， current 保存了当前 item 的一个引用。接着编辑当前项的title，发现并不会同步到<p>中展示。

function handleInput(id, value) {
      const newData = data.map((item)=>{
        if (id === item.id) {
          // return { ...item, title: value };
          const newItem = { ...item, title: value };
          setCurrent(newItem);
          return newItem;
        }
        return item;
      })
    }

import { useState } from 'react';
const defaultData = [
    { title: 'Tom', id: 0 },
    { title: 'Sam', id: 1 },
    { title: 'Dodo', id: 2 },
    { title: 'Piker', id: 3 },
];
function ComA() {
    const [data, setData] = useState(defaultData);
    // 修改
    const [currentId, setCurrentId] = useState(0);
    const currentItem = data.find(({id}) => id === currentId);
    function handleClick({id}) {
      setCurrentId(id);
    }
    function handleInput(id, value) {
      const newData = data.map((item)=>{
        if (id === item.id) {
          return { ...item, title: value };
        }
        return item;
      })
    }
  return (
    <>
      <ul>
        {
          data.map((item) => {
            return (
              <li key={item.id}>
                <input value={item.title} onChange= {({target})=>{ handleInput(item.id, target.value); }}/>
                <button onClick={()=>{ handleClick(item) }}>选中</button>
              </li>
            );
          })
        }
      </ul>
      <p>当前选中：{current.title}</p>
     </>
  );
}