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

React的设计与实现-响应式编程

1.状态更新，UI 自动更新(状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新)

2.前端代码组件化，可复用，可封装(欠缺基本的代码层面的封装和隔离，代码层面没有组件化)

3.状态之间的互相依赖关系，只需声明即可(UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到Callback Hell”)

总结:

1.组件是组件的组合/原子组件

2.组件内拥有状态，外部不可见

3.父组件可将状态传入组件内部

状态归属问题:

1.React 是单向数据流，还是双向数据流 ?(单向)

2如何解决状态不合理上升的问题 ?()

3.组件的状态改变后，如何更新 DOM ?()

组件设计：

1.组件声明了状态和 UI的映射。

2.组件有 Props/State 两种状态。

3.“组件”可由其他组件拼装而成。

React(两大写法之一的hooks写法，该写法也是目前学企界中常用的写法之一)

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>
       );
}

标题：React 的设计思路 - 掘金

网址：juejin.cn/course/byte…