随笔分类 - react
摘要：流程 react在diff之后，会进入commit阶段，将新生成的虚拟DOM发生的变化映射到真实DOM上 在commit的前期，会调度一些生命周期方法，对于类组件来说，会触发getSnapshotBeforeUpdate。对于函数组件来说，会调度useEffect。 但是并不是立即执行，在此阶段，会
阅读全文
摘要：hook组件初渲染 hooks组件在初次渲染时， 解析组件类型，判断是Function还是class类型，然后执行对应类型的处理方法 判断到当前是Function类型组件后，首先在当前组件，也就是fiberNode上进行hook的创建和挂载，将所有的hook api都挂载到全局变量dispatche
阅读全文
摘要：在项目中，我们通常会使用useState来初始化并更新数据。如下： function App(){ const [num, setNum] = useState(0); function increment() { setTimeout(() => { setNum(num + 1); }, 100
阅读全文
摘要：本文参考自https://www.cnblogs.com/goodjobluo/p/9077010.html Redux工作流程 Redux三大基本原则 单一事件原则：所有状态和数据都保存在store中，且只存在一个store 状态只读原则：state数据是只读的，不能直接修改，只能通过派发动作进行
阅读全文
摘要：在react中，原生js监听事件中的setState是同步的，如addEventListener、setTimeout等 而在react控制的事件处理函数中，setState是异步的，如onClick等 setState有两种设置方式， setState传入对象，直接修改state中的数据 setS
阅读全文
摘要：react16的新特性主要在以下四个方面： 新的生命周期 新的语法 优化 hook 新的生命周期 在react16中，不建议使用以下生命周期函数： componentWillMount() componentWillReceiveProps(nextProps, nextState) compone
阅读全文
摘要：vue和react已然是目前最受欢迎的前端开发框架，但公司依然有个项目使用的是jQuery开发。之前面试的时候，也有面试官问，什么项目适合使用jQuery开发呢？ jQuery jQuery无疑是将web开发带向标准化的领路人，兼容了各大浏览器，且包含了各种好用的插件。 但是jQuery体积大，不太
阅读全文
摘要：在vue中，默认通过template编写静态template来实现dom和state的关系。而react中使用JSX实现动态编译。各自有各自的好处与弊端。 template 使用静态模板的方式，很容易迁移到任何可以解析html结构的模板中。也可以很迅速地根据设计稿编写代码。 并且更易优化 JSX 使
阅读全文
摘要：memo memo是只能在函数组件中使用的，类似于class组件中的pureComponent。pureComponent只能对组件中的props和state进行浅层对比。memo第一个参数传入组件，而可以在第二个参数中传入一个函数，其中包含对数据的对比，可以实现深层对比。此时就类似于shouldC
阅读全文
摘要：在React中，当更改state时，不能直接通过this.state更改，而应该通过setState更改。setState会引起某一组件更新后的重绘，会引起新旧虚拟DOM的比较（diff算法）。 因此如果每次更改state都立即执行，进行重绘就会很耗费性能。 因此，对于setState根据情况而决定
阅读全文
摘要：挂载卸载过程 constrctor() 完成数据的初始化，接收参数props和context。需要通过super()传入这两个参数才能使用。 componentWillMount() 组件已经经历了constructor数据初始化后，还未渲染到页面上。一般用于服务端渲染。 componentDidM
阅读全文
