React | 青训营笔记React | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 1 天 *Rea

React | 青训营笔记

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

*React应用场景

前端应用开发

移动原生应用开发

结合Electron,进行桌面应用开发

*React历史

React的设计思路

*ui设计痛点

01.状态更新，UI不会自动更新，需要手动地调用DOM 进行更新。

02.欠缺基本的代码层面的封装和隔离，代码层面没有组件化。

03.UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。

*React的设计思路-响应式与转换式

转换式系统

给定「输入」求解「输出」 eg 编译器数值计算

响应式系统

监听事件，消息驱动 eg 监控系统 UI界面

事件发生之后执行既定回调函数=>状态变更=>ui更新

响应式

状态更新，UI自动更新。
前端代码组件化，可复用，可封装。
状态之间的互相依赖关系，只需声明即可。

组件化

1.组件是组件的组合/原子组件

2.组件内拥有状态，外部不可见

3.父组件可将状态传入组件内部

组件设计

1.组件声明了状态和UI的映射。

2.组件有Props/State两种状态。

1.组件内部拥有私有状态State。 2.组件接受外部的Props状态提供复用性。 3.根据当前的State/Props，返回一一个Ul。

function Component (props) {
// props是父组件传入的状态
const{url}=props;
this.text = ' 点击我'; //状态
//返回一个“UI"
return ( <div>
		<SubComponent props={{ color: ' red' }}>			</SubComponent>
		<img src={url}></ img>
		<button>text</button>
	</div> )
}

3.“组件”可由其他组件拼装而成。

状态归属（伏笔状态管理库）

状态归属于两个节点向.上寻找到最近的祖宗节点

向上找

都在root就不符合react初衷

React（hooks）写法

import React, { useState } from 'react' ;
function Example() {
// Declare a new state variable, which we' 11 call " count"
	const [ count, setCount] = useState(0) ;
	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1) }> 
				Click me
			</ button>
		</div>
	);
}

useState 传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。 useEffect 传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount 时，和依赖项被set的时候会执行。有“副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM, localStorage 存储数据等。

HOOK使用法则

不要在循环，条件或嵌套函数中调用hook。

React实现的问题

01.JSX不符合JS标准

解决：转化一下

02.返回的JSX 发生改变时，如何更新DOM

03.State/Props更新时，要重新触发render函数

React状态管理库

将状态抽离到UI外部进行统一管理

React | 青训营笔记