React | 青训营笔记

63 阅读2分钟

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

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

状态归属问题

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

组件设计

  • 状态 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

组件化

组件内部有私有的state 接受外部props提供复用性 根据当前Props/state提供一个UI

Virtual DOM

Virtual DOM 是一种用于和真实 DOM 同步,而在JS 内存中维护的一个对象,它具有和 DOM 类似的树状结构,并和DOM 可以建立--对应的关系。 它赋予了 React 声明式的 API: 您告诉 React 希望让 UI 是什么状态,React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。