React新手必懂的知识点

react思想:组件化开发

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

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

javascript 复制代码
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里有着至关重要的作用!)

javascript 复制代码
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 组件具有生命周期方法,可以在组件的不同阶段执行特定的操作。了解组件的生命周期方法,如何使用它们来初始化组件、处理更新和销毁组件,将有助于编写可靠和高效的组件代码。

javascript 复制代码
//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对组件的纯净有一定的要求。下面是一个不纯净的案例。

javascript 复制代码
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;

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

javascript 复制代码
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 或其他路由库来实现页面之间的导航和路由管理。

javascript 复制代码
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;
相关推荐
乐闻x5 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚7 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷18 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd79422 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You30 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生42 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410944 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress