react前后端系统架构图 前端 react

1. React概述

1.1 React是什么

• React是一个用于构建用户界面的JavaScript库。
• React的主要特点是组件化、声明式编程以及高效的DOM更新机制。
• React由Facebook开发并开源，已经成为目前最流行的前端框架之一。

1.2 React的特点

• 声明式编程：React采用声明式编程模式，使得代码更加易于阅读和理解。
• 组件化：React将页面分解成多个组件，每个组件都有自己的状态和生命周期，方便复用和维护。
• 单向数据流：React采用单向数据流的模式，父组件通过props向子组件传递数据，子组件通过回调函数向父组件传递数据。
• 虚拟DOM：React采用虚拟DOM的技术，通过对比前后两个虚拟DOM的差异，最小化页面的重绘和回流，提高页面的性能和响应速度。
• 高效：React采用高效的算法和机制，使得页面的渲染速度更快，用户体验更佳。

1.3 React的优点

• 更好的用户体验：React采用虚拟DOM，能够更快地更新页面，提升用户体验。
• 组件化开发：React采用组件化开发，使得代码更加模块化、可复用，提高开发效率。
• 代码可维护性高：React采用单向数据流，使得代码的数据流动清晰可见，方便维护和调试。
• 社区活跃：React拥有庞大的社区和生态圈，能够提供丰富的插件和组件，方便开发。

1.4 React的缺点- React的缺点：

• 学习曲线较陡峭，需要一定的JavaScript基础和了解JSX语法；
• 只关注视图层，不涉及其他方面，需要与其他库或框架配合使用；
• 代码复杂度较高，需要编写大量的组件和逻辑代码；
• 不支持IE8及以下版本的浏览器，需要使用polyfill进行兼容。

2. React基础知识

2.1 JSX语法

- JSX语法实例：

const element = <h1>Hello, world!</h1>; // JSX语法
ReactDOM.render(element, document.getElementById('root')); // 渲染到页面

- JSX表达式实例：

function formatName(user) {
 return user.firstName + ' ' + user.lastName;
}

const user = {
 firstName: 'Tony',
 lastName: 'Stark'
};

const element = (
 <h1>
   Hello, {formatName(user)}!
 </h1>
);

ReactDOM.render(element, document.getElementById('root')); // 渲染到页面

- JSX属性实例：

const element = <div tabIndex="0">Hello, world!</div>; // JSX属性
ReactDOM.render(element, document.getElementById('root')); // 渲染到页面

2.2 组件

- 2.2 组件

• 示例一：Hello World 组件

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

• 示例二：计数器组件

import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Increment</button>
     <button onClick={() => setCount(count - 1)}>Decrement</button>
   </div>
 );
}

export default Counter;

• 示例三：表格组件

import React from 'react';

function Table(props) {
 const { data } = props;

 return (
   <table>
     <thead>
       <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Gender</th>
       </tr>
     </thead>
     <tbody>
       {data.map((item) => (
         <tr key={item.id}>
           <td>{item.name}</td>
           <td>{item.age}</td>
           <td>{item.gender}</td>
         </tr>
       ))}
     </tbody>
   </table>
 );
}

export default Table;

2.2.1 函数式组件

- 函数式组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(
  <Welcome name="John" />,
  document.getElementById('root')
);

2.2.2 类组件

• 类组件是React中定义组件的一种方式，使用ES6 class语法来声明组件。
• 类组件必须继承React.Component类，并实现render方法来描述组件的UI。
• 类组件可以定义自己的状态state，通过setState方法来更新状态并重新渲染组件。
• 类组件也可以定义自己的方法，用于处理用户交互或其他逻辑。
• 类组件可以接收props作为输入数据，通过this.props来访问。
• 类组件的生命周期包括挂载、更新和卸载三个阶段，可以通过重写生命周期方法来实现一些特定的逻辑。

示例：

import React, { Component } from 'react';

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

 handleClick = () => {
   this.setState({ count: this.state.count + 1 });
 }

 render() {
   return (
     <div>
       <h1>{this.props.title}</h1>
       <p>Count: {this.state.count}</p>
       <button onClick={this.handleClick}>Click me</button>
     </div>
   );
 }
}

export default MyComponent;

表格示例：

属性/方法	描述
state	组件的状态对象
setState()	更新组件的状态
props	组件的输入属性
render()	描述组件UI的方法
componentDidMount()	组件挂载后调用的方法
componentDidUpdate()	组件更新后调用的方法
componentWillUnmount()	组件卸载前调用的方法

2.3 Props和State

• Props和State的区别：

区别点	Props	State
存放位置	父组件传递给子组件	组件内部初始化
是否可变	不可变，只读	可变，可修改
对应组件类型	函数组件和类组件	只有类组件
触发视图更新	由父组件传递的props改变	由组件自身调用setState()方法
生命周期	不影响组件生命周期	可能会触发shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate等生命周期

- Props的使用：

function ParentComponent() {
 const name = "小明";
 return (
   <ChildComponent name={name} />
 );
}

function ChildComponent(props) {
 return (
   <div>
     <p>我是子组件</p>
     <p>我的名字是：{props.name}</p>
   </div>
 );
}

- State的使用：

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

 handleClick = () => {
   this.setState({
     count: this.state.count + 1
   });
 }

 render() {
   return (
     <div>
       <p>当前计数：{this.state.count}</p>
       <button onClick={this.handleClick}>增加计数</button>
     </div>
   );
 }
}

2.4 生命周期

• React组件的生命周期包括：挂载阶段、更新阶段、卸载阶段。
• 挂载阶段包括constructor、getDerivedStateFromProps、render、componentDidMount。
• 更新阶段包括getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate。
• 卸载阶段包括componentWillUnmount。

2.5 事件处理- React中的事件处理与原生DOM事件处理有所不同，它使用了合成事件（SyntheticEvent）来封装浏览器的原生事件，提供了跨浏览器的一致性。

• 在React中，事件处理函数需要绑定到组件实例上，可以使用箭头函数或在构造函数中使用bind方法来绑定。
• 事件处理函数中的this默认指向组件实例，而不是触发事件的DOM元素。
• 事件处理函数的参数e是一个合成事件对象，它包含了与原生事件相同的属性和方法，如e.target, e.stopPropagation()等。
• React中的事件处理函数不能返回false来阻止事件冒泡，而需要使用e.stopPropagation()或e.preventDefault()来达到相同的效果。
• 示例代码：

class MyComponent extends React.Component {
   handleClick = (e) => {
     console.log('Button clicked!');
   }
 
   render() {
     return (
       <button onClick={this.handleClick}>Click me</button>
     );
   }
 }

表格语法示例：

React事件处理	说明
onClick	鼠标点击事件
onDoubleClick	鼠标双击事件
onMouseDown	鼠标按下事件
onMouseUp	鼠标松开事件
onKeyDown	键盘按下事件
onKeyUp	键盘松开事件
onFocus	元素获得焦点事件
onBlur	元素失去焦点事件

3. React进阶知识

3.1 高阶组件

• 高阶组件是什么？

• 高阶组件是一个函数，它接收一个组件作为参数并返回一个新的组件。

• 高阶组件的作用是什么？

• 高阶组件可以帮助我们实现组件的复用，逻辑的抽象和封装，以及在不改变原组件的情况下增强组件的功能等。

• 高阶组件的实现方式有哪些？

• 属性代理：通过包裹原组件并向其传递新的props来增强组件的功能。
• 反向继承：通过继承原组件并重写其方法来增强组件的功能。

• 高阶组件的应用场景有哪些？

• 条件渲染：根据条件渲染不同的组件。
• 认证与授权：根据用户的认证状态和权限渲染不同的组件。
• 数据获取与处理：将数据获取和处理的逻辑从组件中抽离出来，使组件更加简洁和可复用。
• 功能增强：增强组件的功能，如添加日志记录、性能统计等。

• 高阶组件的注意事项有哪些？

• 高阶组件不应该修改原组件的props和state。
• 高阶组件应该透传原组件的props和context。
• 高阶组件应该遵循函数式编程的原则，不应该有副作用。

3.2 Hooks

• useState

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• useEffect

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

  function Example() {
    const [count, setCount] = useState(0);

    // 相当于 componentDidMount 和 componentDidUpdate:
    useEffect(() => {
      // 使用浏览器的 API 更新页面标题
      document.title = `You clicked ${count} times`;
    });

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

• useContext

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>{theme}</button>;
}

• useReducer

import React, { useReducer } from 'react';

  const initialState = { count: 0 };

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  }

  function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
      <>
        Count: {state.count}
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </>
    );
  }

• useCallback

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

function Example() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const handleChange = useCallback(e => {
    setText(e.target.value);
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <input value={text} onChange={handleChange} />
    </div>
  );
}

• useMemo

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

  function Example() {
    const [count, setCount] = useState(0);

    const expensiveCount = useMemo(() => {
      return count ** 2;
    }, [count]);

    return (
      <div>
        <p>You clicked {count} times</p>
        <p>Expensive count: {expensiveCount}</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

3.2.1 useState

• useState基础用法：

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• useState使用函数更新状态：

import React, { useState } from 'react';

 function Example() {
   const [count, setCount] = useState(0);

   function handleClick() {
     setCount(prevCount => prevCount + 1);
   }

   return (
     <div>
       <p>You clicked {count} times</p>
       <button onClick={handleClick}>
         Click me
       </button>
     </div>
   );
 }

• useState可以接受函数作为初始值：

import React, { useState } from 'react';

function Example() {
const [count, setCount] = useState(() => {
  const initialCount = 0;
  return initialCount;
});

return (
  <div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  </div>
);
}

• useState可以使用解构赋值：

import React, { useState } from 'react';

function Example() {
 const [state, setState] = useState({ count: 0, name: '张三' });

 function handleClick() {
   setState(prevState => {
     return { ...prevState, count: prevState.count + 1 };
   });
 }

 return (
   <div>
     <p>{state.name} clicked {state.count} times</p>
     <button onClick={handleClick}>
       Click me
     </button>
   </div>
 );
}

3.2.2 useEffect

• useEffect是React中的一个Hook，用于处理组件中的副作用操作，比如数据获取、DOM操作等。
• useEffect的基本用法如下：

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 在这里处理副作用操作
    return () => {
      // 在组件卸载时执行清除操作
    };
  }, [/* 依赖项 */]);

  return <div>Example</div>;
}

• useEffect接收两个参数，第一个参数是一个回调函数，用于处理副作用操作；第二个参数是一个数组，用于指定副作用操作的依赖项，只有依赖项发生变化时，才会重新执行副作用操作。
• useEffect还可以返回一个清除函数，用于在组件卸载时执行清除操作。

3.2.3 useContext

• 使用useContext进行组件间通信

import React, { useContext } from 'react';

 // 创建一个context
 const MyContext = React.createContext();

 // 在父组件中设置context的值
 function Parent() {
   return (
     <MyContext.Provider value="hello">
       <Child />
     </MyContext.Provider>
   );
 }

 // 在子组件中使用context的值
 function Child() {
   const value = useContext(MyContext);
   return <div>{value}</div>;
 }

3.3 Redux

• Redux是一种状态管理工具，它可以帮助我们更好地管理React中的数据流。
• Redux有三个核心概念：store、action和reducer。
• store是Redux中保存数据的地方，我们可以通过store.getState()来获取store中的数据。
• action是Redux中描述事件的对象，它必须包含一个type属性，用来描述事件的类型。
• reducer是Redux中处理事件的函数，它接收当前的state和action，返回一个新的state。
• Redux的使用需要安装redux和react-redux两个包，并且需要在应用中创建一个store。
• 使用Redux时，我们需要定义action和reducer，并将它们注册到store中。
• 可以使用redux-devtools来方便地调试Redux应用。
• Redux还可以与React结合使用，通过react-redux提供的connect函数将Redux的状态映射到React组件的props中。
• 在使用Redux时，需要注意不要滥用Redux，只有在需要管理大量共享状态时才使用它，否则会导致代码变得复杂难以维护。

3.4 React Router- React Router是什么？

• React Router是一个基于React之上的强大路由库，它可以让你向应用中加入路由功能，以便用户可以通过URL访问不同的页面。
• React Router的使用方法

• 安装React Router：npm install react-router-dom
• 在应用中引入React Router：import { BrowserRouter as Router, Route, Link } from "react-router-dom";
• 使用<Router>组件包裹整个应用，使用<Route>组件定义路由规则，使用<Link>组件生成链接。

• React Router的常用API

• <Route>组件：定义路由规则，包含path和component两个属性。
• <Link>组件：生成链接，包含to属性。
• useHistory Hook：获取路由历史记录，可以用来实现页面跳转。

• React Router的高级用法

• 嵌套路由：在一个路由规则中嵌套另一个路由规则。
• 动态路由：使用参数来定义路由规则，例如/users/:id。
• 路由守卫：在路由跳转前进行权限验证或其他操作。可以使用<Route>组件的render属性或者自定义组件来实现。

4. React实战

4.1 创建React应用

• 使用create-react-app创建React应用
• 在应用中添加组件并渲染
• 使用props传递数据给组件
• 使用state管理组件内部状态
• 处理组件事件
• 使用生命周期方法控制组件行为
• 使用React Router实现页面路由
• 使用Redux管理应用状态
• 使用React Hooks优化组件代码
• 使用React测试工具进行单元测试
• 使用React Native开发移动应用
• 使用Next.js实现服务器渲染
• 使用React与其他技术栈进行集成，如GraphQL、TypeScript等
• 使用React开发实际项目的经验分享
• 总结与展望

表格语法：

序号	内容
1	使用create-react-app创建React应用
2	在应用中添加组件并渲染
3	使用props传递数据给组件
4	使用state管理组件内部状态
5	处理组件事件
6	使用生命周期方法控制组件行为
7	使用React Router实现页面路由
8	使用Redux管理应用状态
9	使用React Hooks优化组件代码
10	使用React测试工具进行单元测试
11	使用React Native开发移动应用
12	使用Next.js实现服务器渲染
13	使用React与其他技术栈进行集成，如GraphQL、TypeScript等
14	使用React开发实际项目的经验分享
15	总结与展望

4.2 React与其他框架集成

• React与Vue.js集成示例代码：

// 在Vue.js组件中使用React组件
<template>
  <div>
    <my-react-component :prop1="value1" @event1="handleEvent"></my-react-component>
  </div>
</template>

<script>
  import MyReactComponent from './MyReactComponent';

  export default {
    components: {
      'my-react-component': MyReactComponent
    },
    data() {
      return {
        value1: 'some value'
      }
    },
    methods: {
      handleEvent() {
        // 处理React组件触发的事件
      }
    }
  }
</script>

• React与Angular集成示例代码：

// 在Angular组件中使用React组件
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MyReactComponent } from './MyReactComponent';

@Component({
  selector: 'app-my-angular-component',
  template: '<div #reactContainer></div>',
})
export class MyAngularComponent implements OnInit {
  @ViewChild('reactContainer', { static: true }) reactContainer: ElementRef;

  @Input() prop1: string;

  ngOnInit() {
    ReactDOM.render(<MyReactComponent prop1={this.prop1} />, this.reactContainer.nativeElement);
  }
}

• React与jQuery集成示例代码：

// 在jQuery插件中使用React组件
(function($) {
  $.fn.myJqueryPlugin = function(options) {
    const settings = $.extend({}, options);

    return this.each(function() {
      const $this = $(this);
      const props = { prop1: settings.prop1 };

      ReactDOM.render(<MyReactComponent {...props} />, $this[0]);
    });
  };
})(jQuery);

4.3 React性能优化

4.4 React测试- 使用Jest和Enzyme进行组件测试

• 使用React Testing Library进行组件测试
• 使用Cypress进行端到端测试
• 使用Sinon进行单元测试
• 使用Mocha和Chai进行集成测试
• 使用Jasmine进行全栈测试
• 表格：

测试框架	优点	缺点
Jest	快速、易用、支持快照测试	集成度高，不易定制
Enzyme	支持浅渲染和深渲染，易于测试组件生命周期	不支持React16的新特性
React Testing Library	与用户行为更贴合，测试更真实	不易测试组件内部状态
Cypress	可以进行端到端测试，支持调试	无法测试多个浏览器
Sinon	可以模拟函数和对象，易于测试异步代码	需要与其他测试框架一起使用
Mocha和Chai	灵活、易用，可以与其他测试框架集成	需要手动安装和配置
Jasmine	可以进行全栈测试，易于测试异步代码	集成度不高，不易定制

5. 参考资料

5.1 React官方文档

• React官方文档：https://reactjs.org/docs/getting-started.htmlReact官方文档是React框架的官方文档，提供了详细的React介绍、快速上手指南、组件API等内容，是学习React的必备资料。在这里，你可以了解到React的基本概念、核心特性、组件生命周期、事件处理等知识点，并且可以通过实例代码进行实践操作，加深对React的理解。同时，React官方文档也提供了React Native、React VR等相关技术的文档，方便开发者进行深入学习和应用。

5.2 React源码解析

• React源码解析官方文档：https://reactjs.org/docs/codebase-overview.html
• React源码解析系列博客：https://react.iamkasong.com/
• React源码解析视频教程：https://www.bilibili.com/video/BV1qE411b7cZ
• React源码解析Github仓库：https://github.com/facebook/react
• 表格：React源码解析书籍推荐

书名	作者	出版社	链接
《React源码解析》	陈屹著	机械工业出版社	https://book.douban.com/subject/30374649/

5.3 React实战教程- React官方文档：https://reactjs.org/docs/getting-started.html

• React中文文档：https://zh-hans.reactjs.org/
• 5.3 React实战教程：

• React小书：http://huziketang.mangojuice.top/books/react/
• React Native官方文档：https://reactnative.dev/docs/getting-started
• React Router官方文档：https://reactrouter.com/web/guides/quick-start
• Ant Design官方文档：https://ant.design/docs/react/introduce-cn
• Material-UI官方文档：https://material-ui.com/zh/getting-started/installation/
• Redux官方文档：https://redux.js.org/introduction/getting-started
• Mobx官方文档：https://mobx.js.org/README.html
• TypeScript官方文档：https://www.tslang.cn/docs/home.html
• Next.js官方文档：https://nextjs.org/docs/getting-started
• Gatsby官方文档：https://www.gatsbyjs.com/docs/