React|React 哲学
React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。
React 最棒的部分之一是引导我们思考如何构建一个应用。
第一步:将设计好的 UI 划分为组件层级
将组件当作一种函数或者是对象来考虑,根据单一功能原则
来判定组件的范围。即一个组件原则上只能负责一个功能。如果它需要负责更多的功能,这时候就应该考虑将它拆分成更小的组件。
第二步:用 React 创建一个静态版本
【React|React 哲学】最容易的方式,是先用已有的数据模型渲染一个不包含交互功能的 UI。将渲染 UI 和添加交互这两个过程分开。因为编写一个应用的静态版本时,往往要编写大量代码,而不需要考虑太多交互细节;添加交互功能时则要考虑大量细节,而不需要编写太多代码。所以,将这两个过程分开进行更为合适。
自上而下意味着首先编写层级较高的组件,自下而上意味着从最基本的组件开始编写。当应用比较简单时,使用自上而下的方式更方便;对于较为大型的项目来说,自下而上地构建,并同时为低层组件编写测试是更加简单的方式。
第三步:确定 UI state 的最小(且完整)表示
想要使 UI 具备交互功能,需要有触发基础数据模型改变的能力。React 通过实现 state 来完成这个任务。
第四步:确定 state 放置的位置
- 该数据是否是由父组件通过 props 传递而来的?如果是,那它应该不是 state。
- 该数据是否随时间的推移而保持不变?如果是,那它应该也不是 state。
- 能否根据其他 state 或 props 计算出该数据的值?如果是,那它也不是 state。
- 找到根据这个 state 进行渲染的所有组件。
- 找到他们的共同所有者(common owner)组件(在组件层级上高于所有需要该 state 的组件)。
- 该共同所有者组件或者比它层级更高的组件应该拥有该 state。
- 如果找不到一个合适的位置来存放该 state,就可以直接创建一个新的组件来存放该 state,并将这一新组件置于高于共同所有者组件层级的位置。
推荐阅读
- react|react 安装
- 儿童哲学对话推进小贴士
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- react-navigation|react-navigation 动态修改 tabBar 样式
- Flutter|Flutter SwiftUI React 对比
- 关于哲学
- React|React refs和onRefs的使用
- 手写|手写 React-Native 方法调用式的 Modal 弹框、Toast 提示