这是我参与「第五届青训营 」伴学笔记创作活动的第 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 更新这些在构建应用程序时必要的操作中解放出来。