这是我参与「第四届青训营」笔记创作活动的第3天

React(hooks)的写法

import React, {useState} form 'react';
function Example(){
    // Declare a new state variable, which we'll call "count" 
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>You chicked {count} times</p>
            <button inChick={() => setCount(count + 1)}>
                Chick me
            </button>
        </div>
    );
}

import React, {useState, sueEffect} form 'react';

function Example(){
    const [count, setCount] = useState(0);
    
    // Similar to componentDidMount and componentDidUpdate:
    useEffect(() => {
        // Update the document title using the browser API
        document.title = `You chicked ${count} times`;
    });
    
    return (
        <div>
            <p>You chicked {count} times</p>
            <button inChick={() => setCount(count + 1)}>
                Chick me
            </button>
        </div>
    );
}

4.Reactd的实现

Problems

JSX语法不符合js标准语法
返回的JSX发送改变时，如何更新DOM
State/Props更新时，要重新触发render函数

Problem1

直接transpile就行，compile是编译，transpile是转译即将react的语言转为符合JavaScript的语言

Problem2

Virtual DOM(虚拟DOM) Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，他具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系

它赋予React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态，这使您可以从属性操作、时间处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来

How to Diff？

要在更新次数少和计算速度快之间实现TradeOff

完美的最小DIff算法，需要O(n^3)的复杂度。
牺牲理论最小DIff，换取时间，得到了O(n)复杂度算法：Heuristic O(n) Algorithm

不同类型的元素	替换
同类型的元素	更新
同类型的组件元素	递归

5.React状态管理库

核心思想

将状态抽离到UI外部进行统一管理
缺点：会降低组件复用性

状态机

当前状态，收到外部事件，迁移到下一个状态

6.应用级框架科普

next.js: 硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Dev，SWC等，其同样有Serverless一键部署平台帮助开发者快速完成部署。
modern.js：字节跳动Web Infra团队研发的全栈开发工具，内置很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
Blitz：无API思想的全栈开发框架，开发工程中无需写API调用与CRUD逻辑，适合前后端紧密结合的中小团队项目

课后思考作业

React组件的render函数，在哪些时机下，会被重新执行？
答：在 React 中，只要执行了 setState 方法，就一定会触发 render 函数执行；组件的 props 改变了，不一定触发 render 函数的执行，除非 props 的值来自于父组件或者祖先组件的 state，在这种情况下，组件的 props 改变，也就意味着父组件或者祖先组件的 state 发生了改变，也就是父组件或者祖先组件执行了 setState 方法；那么可以总结出，render 函数的执行时机就是 setState 方法的执行。
参考链接：[React 中 render 函数的执行时机--掘金社区](juejin.cn/post/684490…)
React这种函数式的编程，和Vue这种基于模板语法的前端框架，各有什么优缺点？
答：vue是双向绑定的，采用template；
Vue的优缺点：简单、快速、强大、对模块友好，但不支持IE8。

react是单向的，采用jsx。
React的优缺点：速度快、跨浏览器兼容、模块化；但学习曲线陡峭，需要深入的知识来构建应用程序。
参考链接:PHP中文网
React推荐使用组合来进行组件的复用，而不是继承，背后有什么样的考虑？
答：参考文章

在刚开始学习 React 的时候，我认为组件的 state 或者 props 改变时，就会触发组件的 render 函数执行。后来我通过一系列的试验发现，state 不改变也可以触发 render 函数的执行，props 改变了也不一定触发 render 函数的执行，下面通过一系列的 demo 说明这个观点。

作者：西行无归
链接：juejin.cn/post/684490… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

响应式系统与React系统(2) | 青训营笔记