React #

hooks问题 #

hooks的优点和缺点 #

优点 #

• 可以让函数式组件拥有自己的状态和生命周期
• 代码量相对较小，方便简洁
• 不需要纠结this的指向问题
• 可以通过自定义hooks实现逻辑的复用

缺点 #

• hooks只能在顶层使用，不能在如循环或者条件判断的语句中使用

• hooks可能会出现闭包的问题或者状态非同步问题

• 有时候需要关注依赖项和调用顺序，如useEffect的第二个参数

useState是同步还是异步？ #

useState更新没有合并，是替换，useState执行最后一次更新操作，而更新是浅比较的，更新某个复杂类型数据时只要它的引用地址没变，那就不会重新渲染组件

同步和异步的问题还是得看React版本

• 如果是React18那就是在所有地方的表现都是异步的
• 如果是React18之前的版本，在原生事件和setTimeout、Promise.then中都是同步的，多次调用setState会立即更新state结果也就会立即调用render；在React合成事件以及生命周期中是异步的，多次调用setState只会调用一次render

JSX #

原理 #

全称为JavaScript XML，本质上是React.creatElement的语法糖

工作过程 #

1. JSX代码
2. bable进行编译成使用React.createElement方法
3. 转化为虚拟DOM，也就是JS对象
4. 调用ReactDOM.render()函数进行渲染
5. 转化为真实DOM元素最后插入页面

import React from 'react';   
// 下面的代码没有用到React对象，也要将其import进来
// 因为使用了JSX隐式调用了`React.createElement`方法
import ReactDOM from 'react-dom';

ReactDOM.render( <App />, document.getElementById( 'root' ) );