React新手必懂的知识点

react思想：组件化开发

React 的核心概念是组件化开发，将用户界面拆分成独立的可复用组件。学习如何创建和使用 React 组件，以及组件之间的数据传递和通信是非常重要的。

React的思想就是拆分组件与使用组件。

import React from 'react';

// 定义一个名为 Greeting 的组件
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// 在另一个组件中使用 Greeting 组件
class App extends React.Component {
  render() {
    return (
      <div>
        <Greeting name="Alice" />
        <Greeting name="Bob" />
      </div>
    );
  }
}

export default App;

react本质：jsx

react的本质就是JSX语法，通过使用 JSX，我们可以更直观地描述组件的结构和外观，使代码更易读和维护。同时，JSX 也提供了一些特性，如动态插值、条件渲染和循环渲染等，使得我们能够更灵活地构建动态的用户界面。

虚拟 DOM

React 使用虚拟 DOM 来管理和更新用户界面。了解虚拟 DOM 的概念和工作原理，以及如何使用 React 的 diff 算法来高效地更新 DOM，将有助于提高应用程序的性能和响应能力。

原理：当 React 组件的状态发生变化时，React 会创建一个新的虚拟 DOM 树。React 会将新的虚拟 DOM 树与之前的虚拟 DOM 树进行比较，找出两者之间的差异。React 会根据差异，只更新真实 DOM 中需要变化的部分，而不是重新渲染整个页面。

状态管理：state

学习如何使用 React 的状态（state）来管理组件的数据和状态。了解如何更新状态、处理用户输入和异步操作，以及如何在组件之间共享状态。

React 的 useState Hook 来定义一个名为 count 的状态变量，并初始化为 0。useState 返回一个数组，其中第一个元素是当前的状态值，第二个元素是更新状态的函数。（Hook的概念在react里有着至关重要的作用！）

import React, { useState } from 'react';

function Counter() {
  // 使用 useState Hook 定义一个名为 count 的状态变量，并初始化为 0
  const [count, setCount] = useState(0);

  // 定义一个增加 count 的函数
  const increment = () => {
    setCount(count + 1);
  };

  // 定义一个减少 count 的函数
  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

生命周期：

React 组件具有生命周期方法，可以在组件的不同阶段执行特定的操作。了解组件的生命周期方法，如何使用它们来初始化组件、处理更新和销毁组件，将有助于编写可靠和高效的组件代码。

//constructor()：组件实例化时调用，用于初始化状态和绑定事件处理函数。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}
//componentDidMount()：组件挂载后调用，用于进行异步操作、数据获取等副作用操作。
class MyComponent extends React.Component {
  componentDidMount() {
    fetchData()
      .then(data => {
        this.setState({ count: data.count });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}
//componentDidUpdate(prevProps, prevState)：组件更新后调用，用于响应组件的更新操作。

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log('Count updated');
    }
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

这里不详细说。因为react生命周期这个知识点，应该扩充成1个单独的文章的。
其中比较常见的constructor 作用：

初始化 state ，比如可以用来截取路由中的参数，赋值给 state 。

对类组件的事件做一些处理，比如绑定 this ， 节流，防抖等。

对类组件进行一些必要生命周期的劫持，渲染劫持，这个功能更适合反向继承的HOC。

react组件的纯净思想

由于组件的复用，所以react对组件的纯净有一定的要求。下面是一个不纯净的案例。

import React, { useState, useEffect } from 'react';

function RandomNumber() {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      const randomNum = Math.floor(Math.random() * 100);
      setNumber(randomNum);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <h2>Random Number: {number}</h2>
    </div>
  );
}

export default RandomNumber;

下面是修改后的纯净案例：

import React, { useState, useEffect } from 'react';

function RandomNumber() {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setNumber(prevNumber => {
        const randomNum = Math.floor(Math.random() * 100);
        return randomNum;
      });
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <h2>Random Number: {number}</h2>
    </div>
  );
}

export default RandomNumber;

也因为纯净思想，所以app.js的内容最好就是全部都是组件，不要有任何非组件的存在。

有什么功能，函数都放细分的组件里面。不要放app.js。（app.js一旦不纯净，会使得所有连带刷新的。那重复刷新就非常严重了。）

路由和导航：React Router

对于构建单页应用程序（SPA），学习如何使用 React Router 或其他路由库来实现页面之间的导航和路由管理。

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
};

export default Router;