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 (
    <div>
      <h1>Hello, world!</h1>
      <p>Count: {this.state.count}</p>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

 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 (
    <div>
      <h1>Hello, {this.props.name}!</h1>
      <p>Count: {this.state.count}</p>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

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 (
      <div>
        <p>Count: {this.state.count}p>
      div>
    );
  }
}
 
ReactDOM.render(<Counter />, document.getElementById("root"));

TODO2

组件复用 render-props 高阶组件

组件复用

思考：如果两个组件中的部分功能相似或相同，该如何处理？

处理方式：复用相似的功能（联想函数封装）

复用什么？1. state 2. 操作state的方法 （组件状态逻辑）

两种方式：1. render props模式 2. 高阶组件（HOC）
思路：将要复用的state和操作state的方法封装到一个组件中

render props模式 

思路分析

问题1：如何拿到该组件中复用的state？
在使用组件时，添加一个值为函数的prop，通过函数参数 来获取（需要组件内部实现）

问题2：如何渲染任意的UI？
使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）

使用步骤：

1. 创建Mouse组件，在组件中提供复用的状态逻辑代码（1. 状态 2. 操作状态的方法）。
2. 将要复用的状态作为props.render(state) 方法的参数，暴露到组件外部 。
3. 使用 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 (
      <div>
        <Mouse render={(mouse) => {
          return <p>鼠标当前位置：{mouse.x} {mouse.y}</p>
        }} />
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

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 <WrappedComponent {...this.state} />
}
}

使用步骤

1. 创建一个函数，名称约定以with 开头
2. 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
4. 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
5. 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面

设置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 this.state} {...this.props} />

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