你不知道的React系列(三十)React 编程思考

56 阅读1分钟

本文正在参加「金石计划」

开发之前思考如何构建一个应用

  • 划分组件层级

  • 一个组件原则上只能负责一个功能

  • 如果需要更多的功能拆分成更小的组件

  • 组件结构与数据模型一一对应

  • 只使用props属性初步编写

  • 当你的应用比较简单时,使用自上而下的方式更方便

  • 对于较为大型的项目来说,自下而上构建,并同时为低层组件编写测试是更加简单的方式

  • 确定最小层级state

    只保留应用所需的可变 state 的最小集合,其他数据均由它们计算产生

    确定数据是否属于state

  • 该数据是否是由父组件通过 props 传递而来的?如果是,那它应该不是state

  • 该数据是否随时间的推移而保持不变?如果是,那它应该也不是state

  • 你能否根据其他stateprops计算出该数据的值?如果是,那它也不是state

  • state放到哪个组件

  • 找到根据这个state进行渲染的所有组件

  • 找到他们的父组件

  • 父组件设置state

  • 如果你找不到合适的位置来存放该state,创建新组件存放state,并将新组件置于高于共同所有者组件层级的位置

  • 添加交互逻辑

参考资料:

React 哲学 - React