React｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 5 天状态更新，UI不会自动更新，需要手动地

这是我参与「第五届青训营」伴学笔记创作活动的第 5 天

1.历史与应用

2.设计思路

UI痛点：

状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell” 。

响应式编程

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

组件化（自己的划分，不是dom树）

1.组件是组件的组合/原子组件
2.组件内拥有状态，外部不可见（比如型号的蓝框）
3.父组件可将状态传入组件内部找共同祖先，找到了root 父组件给子组件传东西（eg价格改变函数），子组件触发函数，父组件也就改变了————react是单向数据流！

组件设计：

1.组件声明了状态和UI的映射。
2.组件有Props/State 两种状态。（父组件的/自己的）
3.“组件”可由其他组件拼装而成。

props继承的，状态自己定义的，subcomponent其他定义的组件
当父组件传来的url变，这里的图片变；当这里的color变，subcomponent组件变

生命周期主要关注挂载、卸载、状态改变

3.hooks写法

import React, { useState, useEffect } from 'react' ;
function Example() {
    const [ count, setCount] = useState(0) ;
    // Similar to componentD idMount and componentD idUpdate:
    useEffect(() => {//副作用时使用，要给组件外部造成影响
    // Update the document title using the browser API
    document. title =' You clicked ${count} times ';
    });
    return (
        <div>
            <p>You clicked {count} times</p> 
            <button onClick={() => setCount(count + 1) }>//调用setcount好刷新count
            Click me
            </button>
        </div>
    );
}

4.实现

问题：

JSX不符合JS标准语法(可以转变)
返回的JSX 发生改变时，如何更新DOM Virtual DOM (虚拟DOM)

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

可以牺牲最小diff，换取时间，不追求最优

State/Props更新时，要重新触发render函数

5.状态管理库

这个状态是被整个APP所拥有的，还是被某个组件所拥有的。前者最好放在store，比如头像

比如，例子中的x和y，对其进行+1。把它抽出来做一个组件，那么无论在哪个地方被执行，其他地方都会相应改变。

React｜ 青训营笔记

1.历史与应用

2.设计思路

3.hooks写法

4.实现

5.状态管理库

6.应用级框架

React｜青训营笔记