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

一、本堂课重点内容：

React的hooks写法

代码介绍
Live Code

React实现层的知识

React的实现基本概要
React的实现-Problem1&2
React的实现-How to Diff

React状态管理库

核心思想
推荐
状态机
Modern.js/Reduck
应用级框架科普

二、详细知识点介绍：

hooks之useEffect()的使用

useEffect()是通用的副效应钩子，本身是一个函数，在函数组件内部调用可以使用。在组件加载后，React将会执行这个函数。每当组件渲染的时候，该函数就会执行，而组件首次在网页加载后，副效应函数也会执行。

传入一个函数和一个数组，数组是状态的数组，称为依赖项，该函数在mount时，和依赖项被set的时候会执行。

有“副作用”的函数，要传入userEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM，localStorage存储数据等。

React的实现

问题：

JSX不符合JS标准语法
返回的JSX发生改变时，如何更新DOM
State/Props更新时，要重新触发render函数

Virtual DOM (虚拟DOM)

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

官网：它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

React的状态管理库

将状态抽离到 UI 外部进行统一管理，将状态保存在 Store。

弊端：组件与Store强耦合，不适用于library的开发，在业务代码中可以将组件公用状态放置在Store中。

应用级框架科普

NEXT.JS

硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev, SWC 等，其同样有 Serverless 一键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster”。

MODERN.JS

字节跳动 Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。

Blitz

无 API 思想的全栈开发框架，开发过程无需写 API 调用与 CRUD (Create、Update、Retrieve、Delete) 逻辑，适合前后端紧密联系的小团队项目。

三、实践练习例子：


import React, { useEffect } from 'react';

function Welcome(props) {
  useEffect(() => {
    document.title = '钩子使用实践';
  });
  return <h1>Hello, {props.name}</h1>;
}

四、课后个人总结：

本节课了解了如何使用React中的钩子，并学习了React的状态管理库及其核心思想。对响应式系统与React有了更深的了解。

响应式系统与 React | 青训营笔记