关于React状态管理的三个规则总结

• 前言
  
• No.1 一个关注点
  
• No.2 提取复杂的状态逻辑
  
• No.3 提取多个状态操作
  
• 总结
  

   

• 我应该将组件的状态划分为小状态，照旧保持复合状态？   
  
• 假如状态管理变得复杂，我应该从组件中提取它吗？该怎么做？   
  
• 假如 useState() 的用法是如此简朴，那么什么时间需要 useReducer()？
  

使状态变量负责一个问题。
复制代码

const [state, setState] = useState({
    on: true,
    count: 0
});

state.on    // => true
state.count // => 0
复制代码

// Updating compound state
setUser({
    ...state,
    count: state.count + 1
});
复制代码

const [on, setOnOff] = useState(true);
const [count, setCount] = useState(0);
复制代码

setCount(count + 1);
// or using a callback
setCount(count => count + 1);
复制代码

将复杂的状态逻辑提取到自定义 hook 中。
复制代码

function ProductsList() {
    const [names, setNames] = useState([]);  
    const [newName, setNewName] = useState('');

    const map = name => <div>{name}</div>;

    const handleChange = event => setNewName(event.target.value);
    const handleAdd = () => {    
        const s = new Set([...names, newName]);    
        setNames([...s]);  };
    return (
        <div className="products">
            {names.map(map)}
            <input type="text" onChange={handleChange} />
            <button onClick={handleAdd}>Add</button>
        </div>
    );
}
复制代码

// useUnique.js
export function useUnique(initial) {
    const [items, setItems] = useState(initial);
    const add = newItem => {
        const uniqueItems = [...new Set([...items, newItem])];
        setItems(uniqueItems);
    };
    return [items, add];
};
复制代码

import { useUnique } from './useUnique';

function ProductsList() {
  const [names, add] = useUnique([]);  const [newName, setNewName] = useState('');

  const map = name => <div>{name}</div>;

  const handleChange = event => setNewName(e.target.value);
  const handleAdd = () => add(newName);
  return (
    <div className="products">
      {names.map(map)}
      <input type="text" onChange={handleChange} />
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}
复制代码

   

• 该组件不再包罗状态管理的具体信息   
  
• 自定义 hook 可以重复利用   
  
• 自定义 hook 可轻松进行隔离测试
  

将多个状态操作提取到化简器中。
复制代码

function uniqueReducer(state, action) {
    switch (action.type) {
        case 'add':
            return [...new Set([...state, action.name])];
        case 'delete':
            return state.filter(name => name === action.name);
        default:
            throw new Error();
    }
}
复制代码

function ProductsList() {
    const [names, dispatch] = useReducer(uniqueReducer, []);
    const [newName, setNewName] = useState('');

    const handleChange = event => setNewName(event.target.value);

    const handleAdd = () => dispatch({ type: 'add', name: newName });
    const map = name => {
        const delete = () => dispatch({ type: 'delete', name });    
        return (
            <div>
                {name}
                <button onClick={delete}>Delete</button>
            </div>
        );
    }

    return (
        <div className="products">
            {names.map(map)}
            <input type="text" onChange={handleChange} />
            <button onClick={handleAdd}>Add</button>
        </div>
    );
}
复制代码