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

响应式系统与React

响应式编程

1. 状态更新，UI自动更新。
   • “状态更新，UI不会自动更新，需要手动地调用DOM 进行更新。”
2. 前端代码组件化，可复用，可封装。
   • “欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”
3. 状态之间的互相依赖关系，只需声明即可。
   • “UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell"。"

组件化

1. 组件是组件的组合/原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部

组件设计

1. 组件声明了状态和U的映射。
2. 组件有Props/State两种状态。
3. “组件"可由其他组件拼装而成。

react的写法

1. 写法一

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

2. 写法二

    import React,{ useState,useEffect } from "react' ;
    function Example() {
        const [count,setCount] = useState(0);
        // Similar to componentDidMount and componentDidUpdate:useEffect(() => {
            // Update the document title using the browser APIdocument.title = `You clicked ${count} times `;});
        return (
            <div>
                <p>You clicked {count} times</ p>
                <button onclick={()=> setCount(count + 1)}>click me
                </button>
            </div>
        );
    }
   

虚拟DOM

• Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立-对应的关系。
• 它赋予了React 声明式的API:您告诉React希望让∪l是什么状态，React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

应用级框架科普

1. 硅谷明星创业公司Vercel 的React开发框架,稳定,开发体验好，支持Unbundled Dew , swc等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是“Let"s Make webFaster”
2. 字节跳动Web Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
3. 无API思想的全栈开发框架，开发过程中无需写API 调用与CRUD 逻辑,适合前后端紧密结合的小团队项目。