React进阶
TODO1
组件生命周期
React 组件生命周期 | 菜鸟教程 (runoob.com)
https://www.runoob.com/react/react-component-life-cycle.html
什么是组件生命周期
在 React 中，组件生命周期是指组件从创建到销毁期间经历的一系列阶段。在每个阶段，React 给予我们不同的方法来管理组件的状态和行为。这样，我们就可以根据需要执行相应的操作，以达到更好的效果。
React 组件生命周期包括三个阶段：
- 挂载阶段（Mounting）
- 更新阶段（Updating）
- 卸载阶段（Unmounting）
挂载阶段（Mounting）
挂载阶段发生在组件被插入到 DOM 树中之前。在这个阶段，React 将调用一些方法来初始化组件并准备它们渲染到页面上。
挂载阶段涉及的生命周期方法：
constructor()
`constructor()` 是类中唯一可以直接修改 state 的方法。在组件被创建时，这个方法就会被调用一次。因此，可以在这里设置初始的 state 和 props 值，也可以在其中绑定事件处理程序。
constructor(props) {
super(props);
this.state = {
count: 0
};
// 绑定事件处理程序
this.handleClick = this.handleClick.bind(this);
}static getDerivedStateFromProps()
这个生命周期方法是一个静态方法，也就是说，它可以在组件实例化之前就被调用。从 props 中派生状态的过程中，getDerivedStateFromProps() 可以返回一个新的 state 对象。
static getDerivedStateFromProps(props, state) {
if (props.value !== state.value) {
return {
value: props.value
};
}
return null;
}render()
在组件挂载到 DOM 树上时，React 将调用该方法以确定其如何渲染。返回值应该是子元素、文本或 React 元素。
render() {
return (
Hello, world!
Count: {this.state.count}
);
}componentDidMount()
在组件挂载到 DOM 树上后，React 将调用此方法。因此，在这里可以执行异步操作或获取数据，并使用 `setState()` 来更新组件。
componentDidMount() {
// 获取数据
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
this.setState({
data: data
});
});
}更新阶段（Updating）
一旦组件被挂载到 DOM 树上并在 UI 中渲染出来，它的状态就可以更新。当状态被更新时，React 会运行几个生命周期方法以处理更新过程。
更新阶段涉及的生命周期方法：
static getDerivedStateFromProps()
这个方法在每次组件收到新的 props 时都会被调用，因此可以在这里检查 props 改变是否需要更新 state。如果需要更新，返回一个新的 state 对象，否则返回 null。
static getDerivedStateFromProps(props, state) {
if (props.value !== state.value) {
return {
value: props.value
};
}
return null;
}shouldComponentUpdate()
在 React 调用 render() 方法之前，shouldComponentUpdate() 将被调用。该方法返回 true 或 false 来指示 React 是否应更新组件。默认情况下，React 总是重新渲染组件。但是，可以通过实现这个方法来进行自定义的逻辑判断。
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.name !== this.props.name) {
return true;
}
if (nextState.count !== this.state.count) {
return true;
}
return false;
}render()
在组件更新时，React 调用 render() 来更新 UI。在这里，应该返回新的子元素、文本或 React 元素。
render() {
return (
Hello, {this.props.name}!
Count: {this.state.count}
);
}componentDidUpdate()
在组件更新后，React 将调用此方法。在这里可以执行一些操作，比如发出网络请求、手动更新 DOM 或清除计时器等。
componentDidUpdate(prevProps, prevState) {
if (prevState.count !== this.state.count) {
console.log('Count updated!');
}
}卸载阶段（Unmounting）
卸载阶段是指当组件从 DOM 树中移除时所经历的阶段。在这个阶段，React 将调用一个生命周期方法来执行一些清理工作。
卸载阶段涉及的生命周期方法：
componentWillUnmount()
在组件被卸载之前立即调用。在这里可以清除计时器、取消网络请求或任何其他需要被清理的资源。
componentWillUnmount() {
clearInterval(this.intervalId);
}class Counter extends React.Component {
constructor(props) {
super(props);
console.log(`constructor()`); // 构造函数被调用
this.state = { count: 0 }; // 初始化状态 count
}
componentDidMount() {
console.log(`componentDidMount()`); // 组件挂载完成
this.intervalId = setInterval(() => {
this.setState({
count: this.state.count + 1 // 每秒钟将 count 加一
});
}, 1000);
}
shouldComponentUpdate(nextProps, nextState) {
console.log(`shouldComponentUpdate()`); // 组件更新与否
return true;
}
componentDidUpdate(prevProps, prevState) {
console.log(`componentDidUpdate()`); // 组件更新完成
}
componentWillUnmount() {
console.log(`componentWillUnmount()`); // 组件将被卸载
clearInterval(this.intervalId); // 清除定时器
}
render() {
console.log(`render()`); //组件进行渲染
return (
Count: {this.state.count}
);
}
}
ReactDOM.render(TODO2
组件复用 render-props 高阶组件
组件复用
思考：如果两个组件中的部分功能相似或相同，该如何处理？
处理方式：复用相似的功能（联想函数封装）
复用什么？1. state 2. 操作state的方法 （组件状态逻辑）
两种方式：1. render props模式 2. 高阶组件（HOC）
思路：将要复用的state和操作state的方法封装到一个组件中
render props模式
思路分析
问题1：如何拿到该组件中复用的state？
在使用组件时，添加一个值为函数的prop，通过函数参数 来获取（需要组件内部实现）问题2：如何渲染任意的UI？
使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）
使用步骤：
- 创建Mouse组件，在组件中提供复用的状态逻辑代码（1. 状态 2. 操作状态的方法）。
- 将要复用的状态作为props.render(state) 方法的参数，暴露到组件外部 。
- 使用 props.render() 的返回值作为要渲染的内容。
class Mouse extends React.Component{
state = {
x: 0,
y: 0,
}
// 鼠标移动
handleMouseMove = e => {
this.setState({
x:e.clientX,
y:e.clientY,
})
}
// 监听鼠标移动
componentDidMount() {
window.addEventListener('mousemove',this.handleMouseMove)
}
render() {
return this.props.render(this.state)
}
}
class App extends React.Component{
render() {
return (
{
return 鼠标当前位置：{mouse.x} {mouse.y}
}} />
)
}
}
ReactDOM.render(children代替render属性
注意：并不是该模式叫render props 就必须用名为render的prop，实际上可以用任意名称的prop。
把prop是一个函数并且告诉组件要渲染什么内容的技术叫做：render props模式 。
推荐：使用 children 代替 render 属性
代码优化
1.推荐给render-props模式添加prop校验
2.应该在组件卸载时解除mousemove事件绑定
Mouse.propTypes={
children:PropTypes.func.isRequired
}
componentWillUnmount(){
window.removeEventListener('mousemove',this.handleMouseMove)
}高阶组件
一个接收要包装的组件，返回增强后的组件
思路分析
1、高阶组件（HOC，Higher-Order Component）是一个函数，接收要包装的组件，返回增强后的组件
2、高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给 被包装组件 WrappedComponent
const EnhancedComponent = withHOC(WrappedComponent)
// 高阶组件内部创建的类组件：
class Mouse extends React.Component {
render() {
return 使用步骤
- 创建一个函数，名称约定以with 开头
- 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
- 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
- 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
- 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面
设置displayName
使用高阶组件存在的问题：得到的两个组件名称相同。
原因：默认情况下，React使用组件名称作为displayName解决方式：为高阶组件 设置 displayName 便于调试时区分不同的组件
displayName的作用：用于设置调试信息（React Developer Tools信息）
// 第一步 在高阶函数里写
Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
// 第二步 一个固定的函数 || 为假而来
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Compontent'
传递props
问题：props丢失
原因：高阶组件没有往下传递props
解决方式：渲染WrappedComponent时，将 state 和 this.props 一起传递给组件
传递方式：return
React之组件的复用render props模式及高阶组件_11.28.的博客-CSDN博客https://blog.csdn.net/PILIpilipala/article/details/113404786?ops_request_misc=&request_id=&biz_id=102&utm_term=%E7%BB%84%E4%BB%B6%E5%A4%8D%E7%94%A8%20render-props%20%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-113404786.142^v94^insert_down1&spm=1018.2226.3001.4187
TODO3
React路由
React 路由详解(超详细详解)_react路由_普通网友的博客-CSDN博客https://blog.csdn.net/m0_67402823/article/details/123258677?ops_request_misc=&request_id=&biz_id=102&utm_term=react%E8%B7%AF%E7%94%B1&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-123258677.142^v94^insert_down1&spm=1018.2226.3001.4187
axios
基本用例 | Axios 中文文档 | Axios 中文网 (axios-http.cn)https://www.axios-http.cn/docs/exampleReact axios使用_react使用axios_茜红柿没错xx的博客-CSDN博客https://blog.csdn.net/m0_61260987/article/details/122689021?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169476233316800227454159%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169476233316800227454159&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-122689021-null-null.142^v94^insert_down1&utm_term=axios%20react&spm=1018.2226.3001.4187