React总结

最新推荐文章于 2025-07-24 15:54:18 发布

weixin_33804582

最新推荐文章于 2025-07-24 15:54:18 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：https://juejin.im/post/5baf1abbe51d450e57672271

本文深入讲解React项目搭建、路由配置、组件生命周期、状态管理和性能优化等核心概念，同时介绍了Redux、UI组件、容器组件和无状态组件的区别及使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、利用脚手架搭建React项目首先确保自己电脑上安装了Npm 以及Node（6.5以上版本）

1.npm install create-react-app -g

2. create-react-app my_react

3. cd my_react

4. npm start

二、路由

在src目录下新建 router.js

import React,{Component} from 'react';
import {HashRouter,Route,Switch} from 'react-router-dom';
import DefaultLayout from './layouts/DefaultLayout/DefaultLayout';
import LoginUser from './layouts/LoginUser/LoginUser';
export default class RouterWrap extends Component{
    render(){
        return (
            <div id="router">
                <HashRouter>
                    <Switch>
                        <Route path="/" component={LoginUser}  exact />
                        <Route path="/home" component={DefaultLayout}/>
                    </Switch>
                </HashRouter>
            </div>
        )
    }
}复制代码

修改app.js 引入router

import React, { Component } from 'react';
import RouterWrap from  './router'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <RouterWrap/>
      </div>
    );
  }
}

export default App;                                                                
复制代码

需要了解BrowserRouter、Route、Link、 Switch、 exact精准匹配、 component={ NoMatch }404页面以及嵌套路由(this.props.children)、动态路由（this.props.match.params.value）的用法

三、组件生命周期

React 组件生命周期主要分为三个阶段

Mounting 插入真实 Dom

Updating 正在被重新渲染

Unmounting 已移除真实Dom

常用的生命周期函数

componentwillMount

componentDidMount

componentWillUpdate

conponentDidUpdate

componentWillUnmounting

详细的生命周期执行的函数

render mounting 和 updating时

shouldComponentUpdate（nextProps , nextState）{ return true 或者 false } 判断子组件接收的props值是否发生了改变，组件是否需要被更新

componentWillReceiveProps props更新时执行的生命周期函数一个组件要从父组件接收参数，如果这个组件第一次存在于父组件中，不会执行，如果这个组件已经存在于父组件中，才会执行

四、props 和 state

组件的state 只能通过 this.setState()去修改 setState 是一个异步函数第二个参数可以接收一个回调函数作为 this.setState执行过后执行的函数

子组件通过 props 接收父组件传下来的值 propTypes 验证 props defaultProps 默认props值

触发事件比如点击事件

需要通过 this.func.bind(this)手动绑定this ,可以在第二个位置传递参数个

当组件的props 和 state改变时组件的render函数会重新执行当父组件的render函数重新执行时，所有子组件的render函数都会重新执行

五、react 中的虚拟dom

1. state 数据
2. JSX 模版

3. 数据 + 模版 生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实DOM）（损耗了性能）
['div', {id: 'abc'}, ['span', {}, 'hello world']]

4. 用虚拟DOM的结构生成真实的DOM，来显示 
<div id='abc'><span>hello world</span></div>

5. state 发生变化

6. 数据 + 模版 生成新的虚拟DOM （极大的提升了性能）
['div', {id: 'abc'}, ['span', {}, 'bye bye']]

7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容（极大的提升性能）

8. 直接操作DOM，改变span中的内容

优点：
1. 性能提升了。
2. 它使得跨端应用得以实现。React Native
复制代码

六、react中的 ref

可以通过 ref获取dom节点直接操作dom

ref= { (input) => {this.input = input} }

七、提升react性能的方法

（1）虚拟dom key值同层比对

（2）setState 底层的异步函数多个合并成一个

（3）在 constructor 中函数的作用域绑定 bind(this)

（4）shouldComponentUpdate 避免子组件重复渲染

八、redux

redux中间件

store函数

九、UI组件、容器组件和无状态组件