React 组件生命周期

组件挂载阶段

  • 组件被创建然后插入 DOM 中
  • 生命周期方法
    • constructor 设置组件的初始配置
    • render 解析 JSX，在界面上展示
    • componentDidMount 组件挂载完毕调用
      • 发送网络请求
      • 添加定时器
      • 添加事件监听
      • 获取DOM元素 ```jsx import React, { Component } from ‘react’

class App extends Component { constructor () { super()

  1. // 初始化状态
  2. this.state = {
  3.   count: 0
  4. }
  5. // 改变 this 指向
  6. this.handler = this.handler.bind(this)

}

handler() { console.log(this) } // 解析JSX render () { console.log(‘render执行了’) return (

组件挂载

{this.state.count}
) } // 挂载完毕 componentDidMount() { console.log(‘componentDidMount执行了, 挂载完成’) setInterval(() => { this.setState({ count: this.state.count + 1 }) },1000) } }

export default App

  2. <a name="O1Qor"></a>
  3. ### 组件更新阶段
  5. - 当数据更新之后，组件需要被重新渲染
  6. - 外部传入的 props，以及自身管理的状态
  7. - 生命周期方法
  8.    - shouldComponentUpdate(nextProps, nextState) 
  9.       - 返回一个布尔值，决定组件是否更新，默认返回true
  10.       - 如果次方法返回 false 那么后续的方法不会在执行
  11.    - render 解析JSX，渲染DOM 
  12.    - componentDidUpdate 组件更新完成之后执行
  13. ```jsx
  14. // App.js
  15. import React, { Component } from 'react'
  16. import About from './About'
  18. class App extends Component {
  19.   constructor () {
  20.     super()
  21.     // 初始化状态
  22.     this.state = {
  23.       count: 0
  24.     }
  25.     // 改变 this 指向
  26.     this.handler = this.handler.bind(this)
  27.   }
  29.   handler() {
  30.     console.log(this)
  31.     this.setState({
  32.       count: this.state.count + 1
  33.     })
  34.   }
  35.   // 解析JSX
  36.   render () {
  37.     console.log('render执行了')
  38.     return (
  39.       <div>
  40.         <h1>组件组件更新</h1>
  41.         <div>{this.state.count}</div>
  42.         <button onClick={this.handler}>点击</button>
  43.         <About />
  44.       </div>
  45.     )
  46.   }
  47.   // 挂载完毕
  48.   componentDidMount() {
  49.     console.log('componentDidMount执行了, 挂载完成')
  50.     // setInterval(() => {
  51.     //   this.setState({
  52.     //     count: this.state.count + 1
  53.     //   })
  54.     // },1000)
  55.   }
  56.   // 数据更新触发
  57.   shouldComponentUpdate(nextProps, nextState) {
  58.     console.log('shouldComponentUpdate执行了')
  59.     console.log(nextProps, nextState)
  60.     return true
  61.   }
  62. }
  64. export default App
  1. import React, { Component, PureComponent } from 'react'
  3. //PureComponent 该组件的数据更新 才重新更新
  4. class About extends PureComponent {
  5.   constructor() {
  6.     super()
  7.     this.state = {
  8.       count: 10
  9.     }
  10.   }
  11.   handler = () => {
  12.     this.setState({
  13.       count: this.state.count + 5
  14.     })
  15.   }
  16.   render() {
  17.     console.log('About组件执行了 render')
  18.     return (
  19.       <div>
  20.         <hr />
  21.         <h2>About组件内容</h2>
  22.         <div>{this.state.count}</div>
  23.         <button onClick={this.handler}>点击</button>
  24.       </div>
  25.     );
  26.   }
  27.   // shouldComponentUpdate(nextProps, nextState) {
  28.   //   // 数据更新才重新渲染界面 已不被推荐使用
  29.   //  if (nextState.count === this.state.count) return false
  30.   //   return true
  31.   // }
  32. }
  34. export default About

组件卸载阶段

  • 将组件从 DOM 上删除
  • 生命周期方法
    • componentWillUnmount ```jsx // App.js import React, { Component } from ‘react’ import About from ‘./About’

class App extends Component { constructor () { super() // 初始化状态 this.state = { isShow: true } }

// 解析JSX render () { console.log(‘render执行了’) return (

组件销毁

{this.state.isShow && }
) }

}

export default App

  1. ```jsx
  2. // Abput.js
  3. import React, { PureComponent } from 'react'
  5. //PureComponent 该组件的数据更新 才重新更新
  6. class About extends PureComponent {
  7.   render() {
  8.     return (
  9.       <div>
  10.         <hr />
  11.         <h2>About组件内容</h2>
  12.       </div>
  13.     );
  14.   }
  15.   foo = () => {
  16.     console.log('about组件中的click操作触发')
  17.   }
  18.   componentDidMount () {
  19.     // 当 about 组件挂载完毕就可以执行 DOM 相关操作
  20.     //添加事件监听
  21.     window.addEventListener('click', this.foo)
  22.   }
  23.   // 组件卸载之前执行
  24.   componentWillUnmount(){
  25.     window.removeEventListener('click', this.foo)
  26.   }
  27. }
  29. export default About

React 发送 ajax请求

  1. import React, { Component } from "react";
  2. import axios from "axios";
  4. class App extends Component {
  5.   constructor() {
  6.     super();
  7.     this.state = {
  8.       msg: "",
  9.     };
  10.   }
  11.   render() {
  12.     return <div>当前数据：{this.state.msg}</div>;
  13.   }
  15.   async componentDidMount() {
  16.     const data = await axios
  17.       .get("http://localhost:2021/api/welcome")
  18.       .then((res) => res.data);
  19.     this.setState(data);
  20.   }
  21. }
  23. export default App;

React 请求转发

  • 数据会存在不同的服务器
  • 服务器与服务端是不存在跨域问题
  • 客户端应用发请求给同源的服务端，服务端将请求转发给 API 服务器端， API 服务器将数据处理之后返回给… 客户端应用

截屏2021-04-11 下午9.35.01.png

方式一

  • package.json 配置需要请求的服务器地址

    1. "proxy": "http://localhost:2021"

  • App.js

    1. async componentDidMount() {
    2.   const data = await axios
    3.     .get("/api/welcome")
    4.     .then((res) => res.data);
    5.   this.setState(data);
    6. }

方式二

module.exports = app => { app.use(‘/api’, createProxyMiddleware({ target: ‘http://loaclhost:2021‘, changeOrigin: true })) }

  2. - 发送请求
  3. ```jsx
  4. async componentDidMount() {
  5.     const data = await axios
  6.       .get("/api/welcome")
  7.       .then((res) => res.data);
  8.     this.setState(data);
  9.   }

React中 mock 数据

  • public/api/article.json

    1. [
    2. {
    3.   "id": 1,
    4.   "title": "文章一"
    5. },
    6. {
    7.   "id": 2,
    8.   "title": "文章二"
    9. }
    10. ]

  • 请求数据 ```jsx import React, { Component } from “react”; import axios from “axios”;

class App extends Component {

constructor() { super(); this.state = { articles: [] } }

getArticle = async () => { const articles = await axios.get(‘api/article.json’).then(response => response.data)

this.setState({articles}) } render() { return (

    { this.state.articles.map(article => (
  • {article.title}
    • )) }
) }

}

export default App;

  2. <a name="7DMmG"></a>
  3. ## Redux
  5. - Redux 是一个数据管理框架，提供了一个 store 的统一数据存储仓库
  6. - store 就像是 一个数据管理 中间人，让组件之间无需再直接进行数据传递
  7. <a name="02sQT"></a>
  8. ### 工作流程
  9. ![截屏2021-04-11 下午10.21.35.png](https://cdn.nlark.com/yuque/0/2021/png/1670748/1618150981138-8c89da7e-6d73-4596-bd5a-664cde268ca1.png#height=800&id=QdUF2&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2021-04-11%20%E4%B8%8B%E5%8D%8810.21.35.png&originHeight=800&originWidth=2375&originalType=binary&size=305860&status=done&style=none&width=2375)
  11. - Store
  12.    - 对象类型
  13.    - 负责存储数据，更新视图 
  14. - Action Creators 
  15.    - 对象类型
  16.    - 存储数据的操作行为
  17. - Reducers
  18.    - 函数类型
  19.    - 接收 Action 行为，处理数据，将处理之后的数据返回给 Store
  21. <a name="QDInA"></a>
  22. ### 创建 store及 reducer
  24. - 安装依赖包 `npm install redux react-redux -D`
  25. - src/index.js
  26. ```jsx
  29. import { createStore } from 'redux'
  30. import CounterReducer from './Store/Reducer/Counter.reducer'
  32. const store = createStore(CounterReducer)
  • src/Store/Reducer/Counter.reducer.js
    1. export default () => {
    2. return {
    3.   count: 0
    4. }
    5. }

获取 store

  • src/index.js ```jsx

import { createStore } from ‘redux’ import CounterReducer from ‘./Store/Reducer/Counter.reducer’

import { Provider } from ‘react-redux’

const store = createStore(CounterReducer)

ReactDOM.render( , document.getElementById(‘root’) );

  2. - src/Components/Counter.js
  3. ```jsx
  4. import React, { Component } from 'react'
  5. import {connect} from 'react-redux'
  7. function Counter (props) {
  9.   return (
  10.     <div>
  11.       <button>+1</button>
  12.       <div>{props.count}</div>
  13.       <button>-1</button>
  14.     </div>
  15.   )
  16. }
  20. const mapStateToProps = state => ({
  21.   count: state.count
  22. })
  23. // 第一次调用指明传递什么数据
  24. // 第二次调用指明传递给哪个组件
  25. export default connect(mapStateToProps)(Counter)

组件修改 store 数据

  • src/Components/Counter.js

    1. function Counter (props) {
    3. return (
    4.   <div>
    5.     <button onClick={() => {props.dispatch({type: 'increment'})}}>+1</button>
    6.     <div>{props.count}</div>
    7.     <button onClick={() => {props.dispatch({type: 'decrement'})}}>-1</button>
    8.   </div>
    9. )
    10. }

  • src/Store/Reducer/Counter.reducer.js ```jsx const initialState = { count: 0 }

export default (state=initialState, action) => { console.log(action) switch (action.type) { case ‘increment’ : return { count: state.count + 1 } case ‘decrement’ : return { count: state.count - 1 } default : return state } return state }

  2. <a name="mfkdG"></a>
  3. ### action 传递参数
  5. - src/Components/Counter.js
  6. ```jsx
  7.  <button onClick={() => {props.dispatch({type: 'increment_n', payload: 5})}}>+5</button>
  • src/Store/Reducer/Counter.reducer.js
    1. case 'increment_n' :
    2.     return {
    3.       count: state.count + action.payload
    4.     }

提取 action 代码为函数

  • src/Components/Counter.js ```jsx import React from ‘react’ import {connect} from ‘react-redux’

function Counter (props) { return (

{props.count}
) }

const mapStateToProps = state => ({ count: state.count })

const mapDispatchToProps = dispatch => ({ increment() { dispatch({type: ‘increment’}) }, increment_n(payload){ dispatch({type: ‘increment_n’, payload}) }, decrement() { dispatch({type: ‘decrement’}) } })

// 第一次调用指明传递什么数据 // 第二次调用指明传递给哪个组件 export default connect(mapStateToProps, mapDispatchToProps)(Counter)

  2. <a name="t2jnC"></a>
  3. ### 自动生成 action 触发函数
  5. - src/Store/Actions/Counter.actions.js
  6. ```jsx
  7. export const increment = () => ({type: 'increment'})
  8. export const decrement = () => ({type: 'decrement'})
  9. export const increment_n = (payload) => ({type: 'increment_n', payload})
  • src/Components/Counter.js ```jsx import React from ‘react’ import {connect} from ‘react-redux’

import { bindActionCreators } from ‘redux’ import * as counterActions from ‘../Store/Actions/Counter.actions’

function Counter (props) { return (

{props.count}
) }

const mapStateToProps = state => ({ count: state.count })

const mapDispatchToProps = dispatch => ({ …bindActionCreators(counterActions,dispatch) })

// 第一次调用指明传递什么数据 // 第二次调用指明传递给哪个组件 export default connect(mapStateToProps, mapDispatchToProps)(Counter)

  2. <a name="lOk7T"></a>
  3. ### 设置 action 类型常量
  5. - Store/Action_types/Counter.actions.types.js
  6. ```javascript
  7. export const INCREMENT = 'increment'
  8. export const DECREMENT = 'decrement'
  9. export const INCREMENT_N = 'increment_n'
  • src/Store/Actions/Counter.actions.js ```javascript import { DECREMENT, INCREMENT, INCREMENT_N } from “../Action_types/Counter.actions.types”

export const increment = () => ({type: INCREMENT}) export const decrement = () => ({type: DECREMENT}) export const increment_n = (payload) => ({type: INCREMENT_N, payload})

  2. - src/Store/Reducer/Counter.reducer.js
  3. ```javascript
  4. import { DECREMENT, INCREMENT, INCREMENT_N } from "../Action_types/Counter.actions.types"
  6. const initialState = {
  7.   count: 0
  8. }
  10. export default (state = initialState, action) => {
  11.   console.log(action)
  12.   switch (action.type) {
  13.     case INCREMENT :
  14.       return {
  15.         count: state.count + 1
  16.       }
  17.     case DECREMENT :
  18.       return {
  19.         count: state.count - 1
  20.       }
  21.     case INCREMENT_N:
  22.       return {
  23.         count: state.count + action.payload
  24.       }
  25.     default : 
  26.       return state
  27.   }
  28.   return state
  29. }

reducer 拆分与合并

  • src/Reducer

    • Counter.reducer.js
    • Person.reducer.js
    • index.js ```javascript import {combineReducers} from ‘redux’ import counterReducer from ‘./Counter.reducer’ import personReducer from ‘./Person.reducer’

    export default combineReducers({ counter: counterReducer, person: personReducer }) ```

redux 工作流程

  • 创建 store 管理 reducer ```javascript import { createStore } from ‘redux’

// 3 定义初始数据 const initialState = { content: [‘默认数据’] }

// 2 创建 reducer function reducer (state = initialState, action) { // state: reducer 当中处理完数据之后返回给 store 进行存储的数据 // action: store 传递给 reducer 的具体指令 switch(action.type) { case ‘addContent’: return { content: [ …state.content, action.content ] } default: return state } }

// 1 创建 store 存储数据 const store = createStore(reducer)

  2. - 利用 provider 将 store 向后传递
  3. ```jsx
  4. import { Provider } from 'react-redux'
  7. ReactDOM.render(
  8.   <React.StrictMode>
  9.     <Provider store={store}><App /></Provider>
  10.   </React.StrictMode>,
  11.   document.getElementById('root')
  12. );
  • 在具体的组件当中使用 content 方法获取 store 里保存的数据，通过组件 的 Props 进行访问 ```javascript import { connect } from ‘react-redux’

// 从 store 当中获取当前组件需要的数据 const mapStateToProps = state => ({ content: state.content })

export default connect(mapStateToProps)(App)

  2. - 渲染拿到的数据和修改
  3. ```jsx
  4. class App extends Component {
  5.   constructor() {
  6.     super()
  7.     this.myRef = React.createRef()
  8.   }
  9.   handler = () => {
  10.     // 获取 input 输入框输入内容
  11.     const content = this.myRef.current.value
  13.     // 调用 dispatch 方法将输入内容传给 action，在 reducer 当中进行处理
  14.     this.props.dispatch({type: 'addContent',content})
  15.     // 更新界面
  16.     this.myRef.current.value = ''
  17.   }
  19.   render () {
  20.     return (
  21.       <div>
  22.       <input type="text" placeholder="请输入标题" ref={this.myRef}/>
  23.       <button onClick={this.handler}>新增</button>
  24.       <hr />
  25.       <ul>
  26.         {
  27.           this.props.content.map((item, index) => (
  28.             <li key={index}>{item}</li>
  29.           ))
  30.         }
  31.       </ul>
  32.       </div>
  33.     )
  34.   }
  35. }

代码优化

  • 拆分合并所有的 reducer 交给 store 统一管理
  • 让 react 自动创建 action 执行的函数
  • 将 action 类型使用的字符串定义为常量后 需要使用就有提示

redux 中间键

React 基础2 - 图2

  1. import { createStore, applyMiddleware } from 'redux'
  3. function reducer(state, action) {
  4.   console.log(action)
  5.   return state
  6. }
  8. // 中间键函数
  9. function middle ({getState, dispatch}) {
  10.   return function (next) {
  11.     return function (action) {
  12.       // 此处可以完成异步操作
  13.       setTimeout(() => {
  14.         //自定义数据
  15.         action.payload = 100  
  16.         // 异步操作执行完成之后，需要将 action 交给 store 继续往后传递
  17.         return next(action)
  18.       },2000)
  20.     }
  21.   }
  22. }
  24. // 创建 store 存储数据
  25. const store = createStore(reducer, applyMiddleware(middle))
  26. store.dispatch({type: 'test'})

redux-thunk 异步解决方案

  • 安装插件 npm install redux-thunk
  • 注册中间件 ```jsx import { createStore, applyMiddleware } from ‘redux’

import thunk from ‘redux-thunk’

// 创建 store 存储数据 const store = createStore(totalReducer, applyMiddleware(thunk))

  2. - 使用中间件
  3. ```javascript
  4. import axios from 'axios'
  5. // export const getPersons = (payload) => ({type: 'getPersons', payload})
  6. export const getPersons = () =>  async (dispatch) => {
  7.   let persons = await axios.get('http://localhost:2021/api/getUsers').then(response => response.data)
  8.   dispatch({type: 'loadPersonSuccess', payload: persons})
  9. }

redux-saga 异步解决方案

  • 安装插件 npm install redux-saga -D
  • 注册中间件 src/index.js ```jsx import React from ‘react’; import ReactDOM from ‘react-dom’; import App from ‘./App’; import { createStore, applyMiddleware} from ‘redux’ import { Provider } from ‘react-redux’ import totalReducer from ‘./store/Reducers’ import createSagaMiddleware from ‘redux-saga’ import personSaga from ‘./store/Saga/person.saga’

const sagaMiddleware = createSagaMiddleware()

// 创建 store 存储数据 const store = createStore(totalReducer, applyMiddleware(sagaMiddleware)) sagaMiddleware.run(personSaga)

ReactDOM.render( , document.getElementById(‘root’) );

  2. - 书写中间件逻辑 src/store/Saga/person.saga.js
  3. ```javascript
  4. import {takeEvery, put} from 'redux-saga/effects'
  5. import axios from 'axios'
  7. function * loadPerson () { 
  8.   let persons = yield axios.get('http://localhost:2021/api/getUsers').then(response => response.data)
  9.   yield put({type:'load_person_success', payload:persons})
  10.  }
  13. export default function * personSaga() { 
  14.   yield takeEvery('load_person', loadPerson)
  15.  }
  • reducer逻辑 src/store/Reducers/person.reducer.js ```javascript

// 定义初始数据 const initialState = { person: [] }

// 创建 reducer function reducer (state = initialState, action) { switch(action.type) { case ‘load_person_success’: return { person: action.payload } default: return state } }

export default reducer

  2. - action逻辑 src/store/Actions/person.actions.js
  3. ```javascript
  4. export const load_person = () => ({type: 'load_person'})
  • 使用数据 App.js ```jsx import React, { Component } from ‘react’ import { connect } from ‘react-redux’ import { bindActionCreators } from ‘redux’ import * as personActions from ‘./store/Actions/person.actions’

class App extends Component {

handler = () => { this.props.load_person() }

render () { console.log(this.props) return (

) } }

// 从 store 当中获取当前组件需要的数据 const mapStateToProps = state => ({ person: state.personReducer.person })

const mapDispatchToProps = (dispatch) => ({ …bindActionCreators(personActions, dispatch) })

export default connect(mapStateToProps, mapDispatchToProps)(App)

  1. <a name="zoLCu"></a>
  2. #### redux-saga 拆分与合并
  4. - saga/root.saga.js
  5. ```javascript
  6. import { all } from 'redux-saga/effects'
  7. import personSaga from './person.saga'
  10. export default function * rootSaga () {
  11.   yield all([
  12.     personSaga()
  13.   ])
  14. }
  • index.js ```javascript import rootSaga from ‘./store/Saga/root.saga’

sagaMiddleware.run(rootSaga)

  2. <a name="AJVQT"></a>
  3. ### 简化 action与 reducer
  5. - 安装插件 `npm install redux-actions -D`
  6. - Store/Actions/counter.actions.js
  7. ```javascript
  8. import {createAction} from 'redux-actions'
  10. // export const increment = () => ({type: 'increment'})
  11. // export const decrement = () => ({type: 'decrement'})
  13. export const increment_action = createAction('increment')
  14. export const decrement_action = createAction('decrement')
  • Store/Reducers/counter.reducer.js ```javascript import { handleActions as createReducer} from ‘redux-actions’ import {increment_action, decrement_action} from ‘../Actions/counter.actions’ const initialState = { count: 0 }

const counterReducer = createReducer({ [increment_action]: (state, action) => ({count: state.count + 1}), [decrement_action]: (state, action) => ({count: state.count - 1}) }, initialState)

export default counterReducer ```