这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
React初探索
React的设计思路——UI编程痛点
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新
- 欠缺基本代码层面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系需要手动维护，如果依赖链路长，则会遇到“Call不back Hell”
React的设计思路——响应式与转换式
-
响应式系统
事件——>执行既定的回调——>状态变更
React的设计与实现——响应式编程
-
前端UI
事件——>执行既定的回调——>状态变更——>UI变更
特点：
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
React的设计与实现——组件化
- 组件是 组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
- 组件内部拥有私有状态 State。
- 组件接受外部的Props状态提供复用性。
- 根据当前的State/Props，返回一个UI。
React的设计与实现——状态归属问题
例子：
Q：“当前价格”状态属于谁？
A：Root节点（小伏笔）
状态归属于两个节点向上寻找到最近的祖宗节点
Q：”当前价格“如何改变？
A：将onChangeValue()向下传递（在JavaScript中，函数是“一等公民”）
Q：React是单向数据流,还是双向数据流?
A：React遵循从上到下的数据流向，即单向数据流。
Q：如何解决状态不合理上升的问题?
A：进行状态提升，进行兄弟组件间的简单通信
Q：件状态改变后，如何更新DOM？
A：React并不会把更新的内容挂在真的DOM上，而是使用虚拟DOM，React提供了组件的一个私有的，其他任何组件没有权限改变的属性：state（状态），当组件内容需要变化，我们改变state的对应的值就可以了
组件设计
- 组件声明了状态和UI的映射。
- 组件有Props/State两种状态。
- “组件"可由其他组件拼装而成。
Reac的实现
-
创建虚拟dom的方式
-
①使用原生js的方式去写（一般不用）
使用原生js来创建虚拟dom时，此时script标签的type就不需要写成text/babel，写成原来的text/javascript就可以了，同时也可以删除babel库了，因为不需要它进行转换，浏览器本身就能识别
-
使用jsx语法创建
-
-
关于创建的虚拟dom
- 本质上其实就是一个object对象；
- 虚拟dom上的属性比较少，真实dom属性多，因为虚拟dom只在recat内部使用，用不到那么多的属性
- 虚拟dom最终会被react转换成真实dom，呈现再页面上
JSX语法
-
定义虚拟dom时不要用引号
-
标签中引入js表达式要用{}
-
如果在jsx要写行内样式需要使用style={{coler：red}}形式
-
样式的类名指定不能写class，要写className;
-
只有一个根标签
-
标签必须闭合
-
标签首字母
①若小写字母开头，则会将该标签转为html同名标签，如果没找到，则会报错；
②若大写字母开头，则会认为是组件，它就会去找对应的组件，如果没找到，就会报组件未定义的错误；
（参考文章链接：blog.csdn.net/Ronychen/ar…
（写得不对望指正~）
