React

commit阶段 概述：commit阶段分为before mutation、mutation、layout三个子过程，这三个子过程都会开启while循环，遍历effectlist做对应的操作 befo

上次我们分析到了updateContainer方法，本节继续跟踪 在上节给出的updateContainer简化版的代码中，有如下几个重要的步骤： createUpdate的逻辑很简单，就是创建了一个

从入口说起 不同的react版本，执行的入口有所区别，以官方给的案例来看，在react 17以及以前，入口是这样的： 2022年的时候，react发布了18的版本，入口变成了 这两种入口有什么区别？

服务端项目，webpack配置文件中需要增加target: ‘node’，对于服务端项目来说，如果编译器看到require(‘path’)是不会也不需要把path包下所有内容都打包进来的，所以引入下一

react-redux的作用就是将state和action都映射到组件属性上 还有一种写法： 如果是函数组件，还可以使用useSelector和useDispatch两个hooks，分别对应mapSt

redux单独使用： bindActionCreators其实就是把页面用到的action放到了一起管理，实际使用场景不太多 使用及实现的案例： redux的源码中，createStore中还会默认调

Switch和Route通常是嵌套关系，例如： Switch中会根据当前的location从children中过滤出来匹配的项进行渲染，但Route本身也可以单独使用，所以它内部也有获取当前locat

hash基本使用 浏览器hash有hashchange事件： history基本使用 浏览器的history对象有pushState、replaceState等一些方法 还有onpopstate这样一

useState： 注： 1、第一次render完后，hookState存储了从根节点到各级最底层子节点所有的状态 2、每触发任何一次更新，都会从根节点开始更新，典型的场合是请求成功后、事件回调里se

react的每次更新都是从根组件开始 上面的案例中，如果input里面输入了0，那么点击➕按钮，重新渲染组件，前后两次属性完全一样，所以没必要再渲染，但如果不做任何处理，react还是会再渲染一遍 此

如果想对第三方组件进行功能扩展，可能就会用到高阶组件 注：上面的代码中，由于子类的state被赋值为{number:0}，该对象会覆盖父类中的state，所以子类中就取不到父类中定义的state =

使用context： 供应商： 消费分两种形式： 类组件的消费，可以定义一个静态属性： 函数组件的消费，可以用配套的Consumer组件： 添加常量： 通过React.createContext()创

domdiff中，前后两次如果只是位置做了移动，对象本身没有变，则应该也以移动的方式更新，以保证更新的性能，这种情况就要用到key属性 dom更新的形式主要有以下4种： 思路： 对于旧的节点，reac

在实现剩下两个hook（componentWillReceiveProps和componentWillUnmount）之前，需要先实现domdiff \ dom-diff核心是比较新旧虚拟DOM的差异

shouldComponentUpdate componentWillUpdate 上面代码中if (nextProps) 这个分支，用于父组件更新时，子组件属性值和上次不一样了，也需要更新的场合，n

原生组件的ref指向DOM对象 从虚拟DOM属性上提取ref 在createDOM的最后，添加ref指针即可 createRef方法： 类组件的ref指向类的实例化对象 可以在挂载的时候添加ref引用

如果希望setState之后可以用上上一次的值，可以给setState传函数 setState什么是同步的 什么时候是异步的 在React能管辖的地方就是批量异步的，比如事件处理函数，比如生命周期函数

react中将更新抽象成了一个类Updater 如果某个场合下，用户触发点击时回调执行了setState，例如： 下面的setState就会触发 react-dom -> findDOM 上述代码中，

函数组件经过babel转译之后的结果： FunctionComponent是一个函数，所以我们需要在mount中增加对函数的判断： 对于类组件，babel编译之后依然是一个函数 react中增加了Co

不同react版本对jsx的转换方式： React17以前 React17之后 这么做的原因： 如果在文件里没有引入 React 但经过babel会转换为 React.createElement();