今天重新看了一遍 React 的官方文档，复习下我所知的 React。

零星的知识点

• 引用 react 和 react-dom
• jsx 是一种语法，和 React.createElement() 方法创建的对象是一回事。
• React 使用 render 函数渲染 jsx 代码
• jsx 中 {} 内可以写任意 JavaScript 代码。
• state 是组件内的状态。
• props 是传入组件的属性
• 列表渲染通过遍历方式实现
• 全局状态流使用 MobX 或 Redux 来实现
• React 的组件库一般用 antd
• dva 是基于 redux 的数据流方案。
• UmiJS 是一个可插拔的企业级 react 应用框架，支持路由特性。
• react 是组件化编程。
• 元素事件绑定上要的 this 的指向，可以用箭头函数来绑定 this 指向。
• 列表项需要添加 key 属性。
• 条件渲染是通过 JavaScript 逻辑来实现的。
• 在 React 中，基本完全靠着 JavaScript 来实现各种功能。像列表、HTML 元素渲染、逻辑运算、样式绑定等等。
• 在 React 会用到很多 JavaScript 的最新特性，如注解、class等。
• React 父子组件间通信完全通过 props 完成，无论是向子组件传递数据还是状态提升的回调函数。
• React 对于 TypeScript 支持很好，使用了 TypeScript 方便与进行代码提示和代码检查。
• React 只有组件间的组合，没有组件继承能力。
• 想要在组件标签内填充内容，实现 Vue 的 slot 标签的功能，可以使用 <div>{ props.children }</div> 实现。
• context 用于实现跨层级组件通信。

个人感觉，在 JavaScript 基础扎实的情况下，上手 React 并不难。写一个礼拜就熟悉了。就是到时候看项目，多写多看多总结嘛。

React 设计思路

顺便看了下 thinking in react 这篇文章，记录下 react 应用的设计思路。

1. 根据 UI 划分组件层级，组件应当遵守单一功能性原则。
2. 写出不含交互逻辑的 UI 页面，并且通过 props 设计父组件向子组件的数据传输。
3. 遵守 state 最小表示原则，将 state 写在所需的组件内。并且根据需要计算出其他数据。
4. 确定哪个组件可以改变这些 state，写上组件改变 state 的逻辑。
5. 通过 props 状态提升来实现反向数据流。

按照这个步骤设计和编写 React 组件和应用更加的全面和周到，对我写出更好的代码很有启发。