第五届字节跳动青训营 前端进阶学习笔记（八）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 ...
最新文章
- atitit.跨架构 bs cs解决方案. 自定义web服务器的实现方案 java .net jetty HttpListener...
- TCGA的样本命名规则
- php 抽象类 继承,PHP 抽象类继承抽象类时的注意点
- jdicom怎么做虚拟服务器,jdicom使用手册
- Linux 的帐号与群组：有效与初始群组、groups, newgrp
- Linux内核代码风格
- 神经网络中使用Batch Normalization 解决梯度问题
- c++ 显示三维散点图_Python数据可视化，Matplotlib绘制“散点图”的两种方法！
- oracle游标缓存,【oracle】游标——数据的缓存区
- (纯CSS)悬浮一个元素，让另一个元素改变属性
- uniapp ios时间戳获取不到_个人小程序uniapp实战开发（三）：数据库设计与文章列表...
- xshell和xftp官网
- 手写简易版spring MVC框架
- 语音助手——整体架构和设计
- html文档中strokestyle,HTML5简明教程-1.1.2.HTML5Canvas参考手册 之 笔触strokeStyle
- ERP编制物料清单 基础
- 实验1 输入若干个学生的信息（学号、姓名、成绩），当输入学号为0时结束
- STM32Fx+cubeMX+硬件IIC+INA219(同一个I2C挂载两个芯片)
- php的CURL模块实现在线代理
- 数图互通高校房产管理——720全景地图