响应式系统与 React｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 6 天第六天学习了设计模式相

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

第六天学习了设计模式相关课程内容，我把我学习到的内容做了一些笔记😀。

这次就文字笔记多，敲的代码少了，毕竟依旧还是理论课程-工具篇。

接下来看看我的笔记：

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

状态归属问题

单向数据流
状态管理
实现算法

组件设计

状态 UI
Props/State
组件可由其他组件拼装

Virtual DOM 虚拟DOM 和真是DOM可以建立一一对应的关系。

Diff算法：需要平衡更新时间和更新次数，时间又要小，次数又要少

redux xstate mobx recoil

将状态抽离到UI外部进行管理

NEXT.JS
MODERN.JS
Blitz

我觉得需要更多的思考的话，就把React官网的内容给看完。包括它的入门教程，文档，核心概念，高级指引，API REFERENCE，HOOK，Q&A。这些看完的话，对React的内容更加了解。加上如果还有vue基础的话，实话感觉通过函数式的编程，比vue那种模板会更加舒服。而且对于学习前端框架，后面也还有NEXT.JS这些可以学，做一些SSR项目，对于整体的“响应式系统”的概念会更加深刻。（我ing）

这里贴一个官方对HOOK的介绍的代码：

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState 是我们要学习的第一个 “Hook”。

Hook有几个规则：

只在最顶层使用 Hook
只在 React 函数中调用 Hook

响应式系统与 React 多点找资料深入理解一下，对开发有很大帮助😃！

这里是可嘉的掘金博客，下次见！

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

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