react将html代码字符串转化为html_React 源码解析(第1章) React API一览

React 特色

1. React 是一个纯粹的 ui 框架，ui=fn(x),通过 state 映射 ui 来屏蔽掉 dom 操作
2. React 的核心 API 是 setState，所有的内容都是围绕组件化进行，没有 direvtive 双向绑定和其他 API
3. 思想超前，React16 引入 fiber 概念，从根本上解决 js 单线程运行计算量大导致动画或 ui 卡顿

JSX 到 JavaScript 的转换

JSX 为什么能让我们在 js 里写 html 代码呢？JSX 通过 babel 转译后变成什么？

• 通过尖括号写的 html 标签或者组件标签，最终会被转译为 React.createElement("div")；标签里面的 props，children 等都会作为参数传递给 React.createElement()

为什么组件名称要大写字母开头？

• babel 转译 JSX 语法时，默认会将小写字母开头的标签名作为字符串传给 React.createElement(),将大写字母开头的标签名作为变量传给 React.createElement()

Raect 核心 API

1. Component, PureComponent

• PureComponent 继承于 Component，它和 Component 的唯一区别是 shouComponentUpdata 会对新旧 props、state 进行 shallowEqual 比较，而 Component 的 shouldComponentUpdata 调用会默认返回 true，组件会重新渲染
• React.Component 是一个抽象基础类，通常使用方式是继承于它，并且保障里面有一个 render 函数

2. createRef & ref

• stringRef：通过 this.refs.stringRef 获取设置 ref 属性的实例内容
• funciton：ref={ele => (this.methodRef = ele)}，ele 参数则为所对应的实例，挂在在 methodRef 属性上
• createRef：React 提供的 this.objRef = React.createRef()方法创建一个 {current: null}，通过 this.objRef.current 获取实例内容

3. forwardRef

• 获取 function Component，使用 React.forwardRef 构造一个函数组件，可以传递 ref 参数，获取改组件实例内容

4. context

• 适用于多层嵌套的祖孙组件之间的传值，实现跨越多级组件传递信息的功能
• childContextType（17 版本将废弃），它会导致所有下层组件重新渲染
• createContext：提供 Provider, Consumer 组件，分别为提供方和订阅方，

5. ConcurrentMode

• react 对组件的整体渲染提供优先级并且可以使渲染过程中断，
• ConcurrentMode 组件包裹的子组件的渲染过程的优先级会被降低，react 会先渲染优先级高的
• flushSync 组件包裹的自组件的渲染过程的优先级会被提高

6. Suspense

• Suspense 让组件遇到异步操作时进入“悬停”状态，maxDuration 设置超时只在 ConcurrentMode 下有效
• Suspense 包裹的所有组件被 resolve，组件才被加载
• React.lazy(()=>{})，在组件需要渲染时动态引入组件

7. Hooks (16.7)

• Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。function component 没有 this 对象，没有生命周期；Hooks 对 function component 提供了 class component 能力。

8. children

• 表示组件所有子节点，React.children 有 5 个方法：React.Children.map()，forEach()、count()、only()、toArray()
• 需要注意的是，React.Children.map(props.children, item => [item, [item, [item]]]，经过 map 之后会把多层嵌套的数组平铺开来，

9. memo

• 对 function component 提供 pureCompnent 能力

10. fragment

• 一个空节点，包裹所有的兄弟节点， 可以使用<> 代替

11. strictMode

• 使用某种模式渲染组件，会对一些过时的 API warnning