【JAVASCRIPT】React学习-如何构建一个组件

摘要

react 学习包括几个部分：

• 文本渲染
• JSX 语法
• 组件化思想
• 数据流

组件化思想

组件就是 UI + UI 交互逻辑，组件有三个常规map ， 分别为state 状态 、 props 数据 、refs 不知道是啥。

组件输入为 state 状态 、 props 数据， 输出 为 页面dom 元素。

原理

本质是一个状态机，存在state 标志位，当state变化（调用setState(data, callback)）时，会合并data 与 state，并重新渲染组件。
实现时，尽量拆分出无状态组件，并在无状态组件上层建立有状态的父级组件，可以有效封装用户交互逻辑，无状态组件负责页面渲染，其实就是有状态父级组件负责Controller 层， 无状态子组件负责view 层。

不应该存储至state的数据：
1）计算所得数据
2）react 组件
3）基于props的重复数据

如何构建一个组件

1. 拆分dom 元素

2. 创建dom 模板

3. 抽离UI 变化的源，即组件的state， 尽量建立无状态的子组件 以及 有状态的父组件

4. 确认state 生命周期

5. 添加数据流

当更新props 及 state 会 自动递归调用渲染模板（使用这些值得react 组件）
需要做细粒度的数据渲染性能控制，可以重写 shouldComponentUpdate() 方法返回 false 来让 React 跳过对子树的处理。

浏览器性能瓶颈 一般在 dom 更新，并非JS 执行。

一些常见API

• getDefaultProps
• getDefaultState