前端技术总结

React的设计哲学

2019-10-17  本文已影响0人  空乱木

React的设计哲学摘录自:https://react.docschina.org/docs/thinking-in-react.html

从设计稿开始

第一步:将设计好的 UI 划分为组件层级
1:一个组件原则上只能负责一个功能
2:向用户展示 JSON 数据模型

第二步:用 React 创建一个静态版本
1:先用已有的数据模型渲染一个不包含交互功能的 UI
2:构建应用的静态版本时,你不会用到State用Props - State是面对变化的数据
3:(自上而下或者自下而上构建应用)- 对于较为大型的项目来说,自下而上地构建,并同时为低层组件编写测试是更加简单的方式
4: React 单向数据流(也叫单向绑定)的思想使得组件模块化,易于快速开发

第三步:确定 UI state 的最小(且完整)表示
1: 想要使你的 UI 具备交互功能,需要有触发基础数据模型改变的能力。React 通过实现 state 来完成这个任务。
2: 只保留应用所需的可变 state 的最小集合,其他数据均由它们计算产生

第四步:确定 state 放置的位置
1:哪个组件应该拥有某个 state 这件事,对初学者来说往往是最难理解的部分。
2:

第五步:添加反向数据流
1:自上而下传递的 props 和 state 渲染了一个应用

每一门语言都是艺术和设计的结晶;然而导致的结果就是学习成本的增加;
理解貌似容易;但是实践确实太困难,
如何更好的学习和总结成了一个巨大的问题;
学习没有捷径,但是应该有更好的学习方法;
我还没有找到,不知道什么时候能够找到。

上一篇下一篇

猜你喜欢

热点阅读