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

今天这节课我学习了React，之前写项目都是Vue2,Vue3，很少使用React，我本人对React的了解也不多，只是之前简单的了解了一些。今天这节课我更深入的认识学习了React。

一，本节课重点内容

本节课重点内容上大致可以分为以下几点。

1-React的历史与应用
2-React的设计思路
3-React(hooks)的写法
4-React的实现
5-React的状态管理库
6-应用级框架的科普

通过上面的内容，我由浅入深，学习了React的很多知识。

二，详细知识介绍

历史上，React源于facebook,他对于超大型的项目的编写上，适应非常好。而且具有着非常非常强大的生态环境。

设计思路上，React有着解决在UI编程上的一些痛点，比如:

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

所以React的设计思路就是响应式编程

这样有以下几个优势。

状态更新，UI会自动更新
代码组件化，可复用性更强，可以封装，更方便。
状态之间的依赖关系，只需要声明即可。

老师还介绍了React的具体使用和hooks的写法，详细可以见下面的例子

接下来老师先引出了React使用开发上可能会出现的一些问题。

JSX不符合JS的标准语法
返回的JSX发生变化时，存在如何更新DOM的问题
State和Props更新时，要重新触发render函数。

接下来讲了Virtual DOM的知识点

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

接下来推荐了React的四种状态管理库

redux
xstate
mobox
recoli

最后介绍了一些应用级框架，比如next.js等

三，实践的例子

响应式编程

function Component(props) {
    const { url } = props;
    this.text = "点击我";
    // 返回一个UI
    return (<div>
                <SubComponent props={{ color: 'red' }}></SubComponent>
                <img src={ url }></img>
                <button>text</button>
            </div>)
}

<div class='box' id='content'>
  <div class='title'>Hello</div>
  <button>Click</button>
</div>

上面的 DOM 结构等同于下面的结构

{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}

React组件:


import React from 'react';

function MyComponent(props) {
    return <div>{props.hello}</div>
}

四，课后个人总结

因为对React不熟练，所以这节课我听得还是蛮吃力的，以后会加强对React的学习和练习。

前端与React|青训营笔记

一，本节课重点内容

二，详细知识介绍

三，实践的例子

四，课后个人总结