您的位置：首页 > 编程学习 > > 正文

react重点和难点（关于React状态管理的三个规则总结）

更多时间：2021-10-01 01:32:02 类别：编程学习浏览量：2336

react重点和难点

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

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

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

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

names 状态变量保存产品名称。单击 Add 按钮时，将调用 addNewProduct() 事件处理程序。

在 addNewProduct() 内部，用 Set 对象来保持产品名称唯一。组件是否应该关注这个实现细节？不需要。

最好将复杂的状态设置器逻辑隔离到一个自定义 hook 中。开始做吧。

新的自定义钩子 useUnique() 可使每个项目保持唯一性：

// 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];
};

将自定义状态管理提取到一个 hook 中后，ProductsList 组件将变得更加轻巧：

import { useUnique } from './useUnique';

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

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

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

const [names, addName] = useUnique([]) 启用自定义 hook。该组件不再被复杂的状态管理所困扰。

如果你想在列表中添加新名称，则只需调用 add('New Product Name') 即可。

最重要的是，将复杂的状态管理提取到自定义 hooks 中的好处是：

该组件不再包含状态管理的详细信息
自定义 hook 可以重复使用
自定义 hook 可轻松进行隔离测试

No.3 提取多个状态操作

将多个状态操作提取到化简器中。

继续用 ProductsList 的例子，让我们引入“delete”操作，该操作将从列表中删除产品名称。

现在，你必须为 2 个操作编码：添加和删除产品。处理这些操作，就可以创建一个简化器并使组件摆脱状态管理逻辑。

同样，此方法符合 hook 的思路：从组件中提取复杂的状态管理。

以下是添加和删除产品的 reducer 的一种实现：

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();
    }
}

然后，可以通过调用 React 的 useReducer() hook 在产品列表中使用 uniqueReducer()：

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 (
            <li>
                {name}
                <button onClick={delete}>Delete</button>
            </li>
        );
    }

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

const [names, dispatch] = useReducer(uniqueReducer, []) 启用 uniqueReducer。names 是保存产品名称的状态变量，而 dispatch 是使用操作对象调用的函数。

当单击 Add 按钮时，处理程序将调用 dispatch({ type: 'add', name: newName })。调度一个 add 动作使 reducer uniqueReducer 向状态添加一个新的产品名称。

以同样的方式，当单击 Delete 按钮时，处理程序将调用 dispatch({ type: 'delete', name })。remove 操作将产品名称从名称状态中删除。

有趣的是，reducer 是命令模式的特例。

总结

状态变量应只关注一个点。

如果状态具有复杂的更新逻辑，则将该逻辑从组件提取到自定义 hook 中。

同样，如果状态需要多个操作，请用 reducer 合并这些操作。

无论你使用什么规则，状态都应该尽可能地简单和分离。组件不应被状态更新的细节所困扰：它们应该是自定义 hook 或化简器的一部分。

这 3 个简单的规则能够使你的状态逻辑易于理解、维护和测试。

到此这篇关于React状态管理的三个规则的文章就介绍到这了,更多相关React状态管理内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！

标签：react 状态管理

上一篇：dedecms版本介绍（解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法）

下一篇：以服务器为中心的存储架构的优势（解析云服务器存储系统的结构模型）

您可能感兴趣

react重点和难点（关于React状态管理的三个规则总结）

react重点和难点

目录

热门推荐

排行榜