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

响应式系统与React学习记录

React 是一个用于构建用户界面的 JAVASCRIPT 库。

为什么使用React

假如使用Javascript写UI会遇到的问题：

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

响应式系统是注重的点在于监听事件和事件发生之后系统要做什么事情。

响应式编程

状态更新，UI 自动更新。
前端代码组件化，可复用，可封装。
状态之间的互相依赖关系，只需声明即可。

React的组件化

什么是组件

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

组件的设计思路

组件声明了状态和 UI 的映射。
组件有 Props/State 两种状态
“组件”可由其他组件拼装而成。

React(hooks)的写法

首先先看一段代码:

import React,{ useState, useEffect } from 'react';

function Example(){
    const [const, setCount] = useState(0);
    
    useEffect(() => {
        document.title = 'You clicked ${count} times';
    });
    
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(conut +1)}>
            Click me
            </button>
        </div>
    );
}

import React,{ useState, useEffect } from 'react';是使用React组件库。

<p>You clicked {count} times</p>
<button onClick={() => setCount(count +1)}>

在这段代码中，当按钮被按下，count会增加 1 ，并且，会同步到文本中。
3.

useEffect(() => {
        document.title = 'You clicked ${count} times';
    });

在这段代码中，使用到了useEffect()函数，其中内容是表示会将count同步到页面标题中。

总结

在本次学习中，认识了React的优缺点。相对于需要向后端请求函数进行数据变量处理的js，React可以直接在前端就完成了变量的更新。这对于这样可以让前端代码组件进行封装使用，部分变量更新的功能不需要后端的介入，会相对方便很多。并且今天学习了React的基本语法和状态管理库，可以在vue中进行React的实现与设计。

响应式系统与React学习记录｜青训营笔记