React基础与实践 | 青训营笔记

直到海水变蓝
87 阅读2分钟

510725758223946157.jpg

课程介绍

一、React简介与特性

二、React基础温故知新

三、业务场景案例

四、课程总结与答疑

一、React特性与简介

react用于构建用户界面的JavaScript库

① React特点

1. 声明式 2. 组件化 3. 跨平台编写

② React哲学（thinking in react）

一、1.react是用JavaScript构建快速响应的大型web应用程序的首选方式之一。它在Facebook和Instagram上表现优秀。

2.等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。

  • 等待资源加载：

  1. 一次请求太多资源？

  2. 网络请求慢？

  3. 资源加载失败？

  • 浏览器线程执行：
  1. JS执行
  2. 浏览器计算样式布局
  3. UI绘制

329697282956993308.jpg

③ Lazy & Suspense

代码展示

<Tabs activeTab={activeKey}onChange={setActiveKey}>
{routes.map((item)=> {
const Component = Reactlazy(() =>import(`./${item.key}`)); 
const RenderComponent = (
<Suspense fallback=(“资源加载中...> 
<Component />
</Suspense>
);
return(
<Tabs.TabPane key={item.key} title={item.name}>
{RenderComponent}
</Tabs.TabPane>
);
})}
</Tabs>

样例演示

655469702048977889.jpg

④ ErrorBoundary

代码展示

class ErrorBoundary extends React.Component{
constructor(props){
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(){
// 更新 state 使下一次渲染能够现实降级UI 
return { hasError: true };
}
 
componentDidCatch(error,errorInfo){ 
logger.error(error, errorInfo);
}
render() {
if(this.state.hasError){
// 你可以自定义降级后的 UI 并渲染 
return (
<Empty description="抱歉，出现错误!" />
);
}
return this.props.children;
  }
}

样例演示

721419407664937777.jpg

⑤ 更新流程

  1. Scheduler（调度器）
  • 维护时间切片（类似requestidleCallback）
  • 与浏览器任务调度
  • 优先级调度

2.Reconciler（协调器）

  • 将JSX转化为Fiber
  • Fiber树对比（双缓存）
  • 确定本次更新的Fiber

3.Renderer(渲染器)

  • 渲染器用于管理一颗react树，使其根据底层平台进行不同调用。

图解

299324992241534472.jpg

155006251448066468.jpg

⑥ 优缺点

1.优点：

  • 快速响应：Fiber
  • 组件化：复用性强
  • 声明式编程
  • 跨平台:只需修改渲染器

2.缺点：

  • 大型应用需要配套学习状态管理，路由工具
  • 不适合小型应用，需要用Babel处理

二、react基础温故知新

① 用react开发web应用

637784460861843472.jpg

② 用react开发web应用：组件

903341779324561426.jpg

③ 组件

1.Class组件

  • 继承+构造函数
  • this
  • 生命周期
  • render方法

代码展示

class Demo1 extends React.Component{
constructor(props){ 
super(props);
this.state = { date: new Date() };
}
timerID = null; 
tick() {
this.SetState({
date: new Date(),
});
}
componentDidMount() {
this.timerID = setInterval(()=> this.tick()，1000);
}
componentWillUnmount(){
clearInterval(this.timerID);
}
render() {
return (	
<div>	
<h1>Hello，world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
};
}
}

2.函数式组件

  • 没有生命周期
  • 借助Hook
  • return JSX

代码展示

function Demo1WithHook(){ 
const [date, setDate] = useState<Date>(new Date()); 
const timerID =useRef<any>(null);

const tick = () => setDate(new Date());

useEffect(() => {
timerID.current = setInterval(tick， 1000);
return () => {
clearInterval(timerID.current);
};
});

return( 
<div>
<h1>Hello，React Hook!</h1>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
);
}

3.函数式相较于Class的优点

  • 代码量骤减，组件干净清爽。
  • 没有复杂的生命周期
  • 支持自定义hook，逻辑复用方便。

**4.组件和Hook的关系

  • 我们将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件，组件相当于原子。
  • hook贴近组件内部运行的各种概念逻辑，effect，state，context等，hooks更贴近于电子。

④ Hook规则 & 原理

1.react怎么知道哪个state对应哪个useState?

答案是react靠的是Hook调用的顺序。

184068607074184435.jpg

代码演示

function Form() {
const [name, setName] =useState('Mary');:// 1 
const firstRender=useRef(true);// 2

if(firstRender.current){
firstRender.current = false;
useEffect(function persistForm() { // 3
localStorage.setItem('formData', name);
});
}
const [surname, setSurname] = useState('Poppins');// 4 
useEffect(function updateTitle(){ // 5
document.title = name +''+ surname;
});
// ...
}

useEffect(function persistForm(){
if(firstRender.current){
localStorage.setItem('formData',name); 
firstRender.current = false;
}
});

2.只能在react函数中调用Hook

  • 在react函数组件中或自定义hook中调用
  • 自定义hook必须以use开头
  • hook中的state是完全隔开的

代码展示

function useUpdatedEffect(effect, deps){
const firstRender=useRef(true);

useEffect(() => {
if(firstRender.current){
firstRender.current = false；
} 
else {
return effect();
}
}，deps);
}

function Form(){
//...
useUpdatedEffect(function persistForm(){
localStorage.setItem('formData',name);
}，[name]);
//...

3.Hook过期闭包问题

function createIncrement(i) {
let value = 0;
function increment(){ 
value += i;
console.log(`Increment value is ${value}`);
const message = 'LogValue is ${value}`;

function logMessage(){
console.log(message);
 }
return logMessage;
}
return increment;
 }
const inc = createIncrement(1);
const log = inc(); // Increment value is? //1
inc(); // Increment value is ?	//2	
inc(); // Increment value is ?	//3	
log(); // LogValue is ?	//1

在JS中，函数运行的上下文是由定义的位置决定的， 当函数的闭包包住了旧的变量值时，就出现了过期闭包问题。

function WatchCount(){
const [count, setCount] =useState(0);

useEffect(() => {
const id = setInterval(() => {
console.log(`Current Count is ${count}`);
}，1000);
return () => clearInterval(id);
}，[]);
[count]	 	
const increment = () => setCount(count + 1); 
return (
<div>
{count}
<Button onClick={increment}>Increment</Button>
</div>
);
}

⑤ react常见API及作用

645537054815719144.jpg

215444274242315116.jpg

三、具体场景案例

373017105266495216.jpg

342657926393478342.jpg

652467603499358334.jpg

113433736029916431.jpg

523258510941896457.jpg

588013457773278368.jpg 271597585496777647.jpg

565328899350257532.jpg

623228504757223048.jpg

271365889984235155.jpg

176801318845124838.jpg

513922577361143584.jpg

61587693893341108.jpg

490870870696124034.jpg

46585935619790650.jpg

686827810317810141.jpg

199016258677291339.jpg

770856330652846527.jpg

903997370986620242.jpg

701420807064457110.jpg

479295534602188906.jpg

13092473755285481.jpg

634008986369146762.jpg

603405259246524960.jpg

901615205189220793.jpg

四、课程总结与答疑

272841243094654153.jpg 另外，我们作为初学者需要了解并尽量掌握以下Reactd的知识点：

React 是一种流行的 JavaScript 库，用于构建用户界面。如果您是初学者，以下是一些应注意的 React 基础和实践：

  1. 渲染单个组件：搞清楚如何创建和渲染单个组件。

  2. JSX：了解并实践 JSX 语法，这是 React 开发中必不可少的部分。

  3. 组件生命周期：理解 React 组件的生命周期，以及每个方法的作用和执行时间。

  4. 状态管理：掌握组件状态管理，包括状态提升和 Redux 状态管理库。

  5. 组件通讯：学习如何在组件之间进行通信，包括父子组件通信、兄弟组件通信和跨层级组件通信。

  6. 高阶组件：掌握高阶组件的概念和使用，这是一种用于增强组件功能的设计模式。

  7. 代码组织：组织 React 代码时，需要考虑代码的可读性、可维护性和可扩展性，不要让代码难以理解和维护。

  8. 性能优化：了解 React 性能优化的原理和方法，避免不必要的渲染和重复计算。

  9. 测试：在开发过程中，考虑如何测试 React 组件，包括单元测试、集成测试和端到端测试。

  10. 社区资源：关注 React 社区的学习资源和最佳实践，从中受益并贡献自己的经验。

以上是初学者应该注意的 React 基础和实践问题。掌握这些知识点，可以让你更好地理解和应用 React。

好了，以上是本次笔记的所有内容了，祝大家天天开心，我们下次见喽！

591308010325189940.jpg

avatar
文章
阅读
粉丝