第五届字节跳动青训营前端进阶学习笔记（八）React框架入门

文章目录

前言
React 的设计思路
- 1.传统JavaScript更新UI的痛点
- 2.我们对UI代码的需求
- 3.组件
- - （1）组件定义
  - （2）组件设计
  - （3）组件结构
- 4.React的生命周期
React的基本语法
- 1.JSX
React的实现
- 1.虚拟DOM
- 2.响应数据的实现

前言

课程重点：

React的历史

React的设计思路

React的实现原理

React的状态管理库

React应用级框架科普

React 的设计思路

1.传统JavaScript更新UI的痛点

状态更新，UI不会自动更新。需要手动的调用DOM函数进行更新
缺少基本层面代码的封装和隔离，代码层面没有组件化
UI之间的数据依赖关系，需要手动维护

2.我们对UI代码的需求

状态更新，UI自动更新
前端代码组件化，可复用，可封装
声明式的状态依赖关系

3.组件

（1）组件定义

组件是组件的组合/原子组件
组件内部拥有的状态，外部不可见
父组件可以将状态传递给子组件

（2）组件设计

组件声明了状态和UI的映射
组件有Props和State两种状态
组件可由其他组件拼装而成

（3）组件结构

组件内部拥有私有状态State
组件接收外部的Props状态提供复用性
根据当前的State和Props返回UI

4.React的生命周期

React的生命周期主要有三个阶段，即Mounting、Updating和UnMounting。分别对应着组件的挂载、更新和卸载三个阶段。

React的基本语法

1.JSX

React的模板语法使用的是一种叫做JSX的语法，基本形式如下：

import React, {useState} from 'react';function Example {const [count, setCount] = useState(0);return (<div><p>点击了{ count }次</p><button onClick={ () => setCount(count+1)}>点击</button></div>)
}

React的实现

1.虚拟DOM

虚拟DOM就是一种将真实HTML元素，转换成JS对象表示形式的JS对象，它具有和DOM一样的树形结构，并且可以和真实DOM建立一一对应的关系。

2.响应数据的实现

React的响应式数据的实现方式是在发布订阅模式的基础上，应用diff算法实现虚拟DOM的快速更新。

diff算法是一种应用了如下规则的，通过比较新老节点是否有发生变化，从而做到只对部分节点进行更新，达到提高整体渲染效率的算法。

第五届字节跳动青训营前端进阶学习笔记（八）React框架入门相关推荐

第五届字节跳动青训营寒假 —— 前端专场
第五届字节跳动青训营寒假 -- 前端专场文章目录第五届字节跳动青训营寒假 -- 前端专场青训营 - 前端练习题每日一练编程题前端编程题 [342. 4的幂](https://leetcod ...
第五届字节跳动青训营（寒假）—— 后端练习题
第五届字节跳动青训营(寒假)-- 后端练习题 Day1 选择题 1.Client 在使用 Https 协议访问网站进行通信的过程中,以下说法正确的是? A. 只用到了对称加密技术 B. 只用到了非对称 ...
字节跳动青训营--前端day7
文章目录前言一.Node.js 的应用场景 (why) 1. 前端工程化 2. web服务端应用 3. Electron跨端桌面应用二.Node.js 运行时结(what) 1. V8 ,lib ...
第五届字节跳动青训营 - 寒假专场【前端后端】
青训营是字节跳动 ByteTech 社区发起的技术系列培训 & 人才选拔项目,面向在校大学生,旨在培养优秀且具有职业竞争力的开发工程师.青训营全程完全免费,不收取费用. 面向人群:在校大学 ...
字节跳动青训营--前端day8
文章目录前言一.CSR,SSR,SSG 1. CSR 2. SSR 3. SSG 4. SSR,SSG的优势利于SEO 更短的首屏时间二.什么是Next.js 三.Next.js客户端开发 1 ...
字节跳动青训营--前端day5
文章目录前言一.初识HTTP 拓展-输入地址到页面渲染发生了哪些事情二.协议分析 1.发展 2.报文 2.1 请求报文: 请求行: 请求头主体 2.2 响应报文: 状态行响应头响应正文 2 ...
字节跳动青训营--前端day10
文章目录前言一.web开发安全 - 攻击 1. Cross-Site Scripting(XSS) 1.1 存储型(Stored Xss) 1.2 反射型(Reflect Xss) 1.3 DOM ...
字节跳动青训营--前端day1
文章目录前言一. 前端 1 前端的技术栈 2. 前端的边界 3. 前端的关注点二. HTML 1. HTML常用标签及语义化 2. HTML 语法 3. 谁在使用我们写的HTML 前言仅以此文 ...
字节跳动青训营--前端day3
文章目录前言一.写好JavaScript的一些原则二.各司其职三.组件封装四.过程抽象前言仅以此文章记录学习一.写好JavaScript的一些原则各司其职:让HTML.CSS和Jav ...

第五届字节跳动青训营前端进阶学习笔记（八）React框架入门

文章目录

前言

React 的设计思路

1.传统JavaScript更新UI的痛点

2.我们对UI代码的需求

3.组件

（1）组件定义

（2）组件设计

（3）组件结构

4.React的生命周期

React的基本语法

1.JSX

React的实现

1.虚拟DOM

2.响应数据的实现

第五届字节跳动青训营前端进阶学习笔记（八）React框架入门相关推荐

最新文章

热门文章

第五届字节跳动青训营 前端进阶学习笔记（八）React框架入门

文章目录

前言

React 的设计思路

1.传统JavaScript更新UI的痛点

2.我们对UI代码的需求

3.组件

（1）组件定义

（2）组件设计

（3）组件结构

4.React的生命周期

React的基本语法

1.JSX

React的实现

1.虚拟DOM

2.响应数据的实现

第五届字节跳动青训营 前端进阶学习笔记（八）React框架入门相关推荐

最新文章

热门文章

第五届字节跳动青训营前端进阶学习笔记（八）React框架入门

第五届字节跳动青训营前端进阶学习笔记（八）React框架入门相关推荐