这是我参与「第五届青训营 」伴学笔记创作活动的第 10天 
青训营课程笔记

React介绍

学习React前需要具备的知识：

• HTML/JS/CSS基础
• 基础的数据结构/算法知识如二叉树、深度、遍历等
• 会使用浏览器提供的DOM API来修改DOM，更新UI

React历史

• 2010年，facebook在PHP生态中引入了xhp框架，首次引入了组合式组件的思想，启发了后来React框架的设计
• 2011年，Jordan Walke创造了FaxJS,这是React的原型
• 2012年，Jordan Walke基于FaxJS的经验，创造了React

React的设计思路

思路——解决UI编程的痛点 痛点

• 状态更新。UI不会自动更新，需要手动的调用DOM
• 欠缺基本的代码层面的封装和隔离，代码未组件化
• UI之间的数据依赖关系，需要手动维护 **设计实现
• 状态更新。UI自动更新
• 前端代码组件化，可复用，可封装
• 状态之间的互相依赖关系，只需声明即可，不需要手动维护

React组件化

• 组件是组件的组合/原子组件
• 组件内拥有状态，外部不可见
• 父组件可将状态传入组件内部

思考

eact是单向数据流还是双向数据流

React是单向数据流，遵循从上到下的数据流向，与Vue不同,Vue是双向绑定数据流

何解决状态不合理上升的问题

进行状态提升，进行兄弟组件间的简单通信

件状态改变后，如何更新DOM

React并不会把更新的内容挂在真的DOM上，而是使用虚拟DOM，React提供了组件的一个私有的，其他任何组件没有权限改变的属性：state（状态），当组件内容需要变化，我们改变state的对应的值就可以了

组件设计

• 组件声明状态和UI映射
• 组件有Props/state两种状态
• 组件可由其他组件拼装而成

React实现

使用虚拟DOM，它赋予React声明式的API，使React确保DOM匹配相应状态