React（四）React生命周期、发送网络请求、跨域处理

目录

一、react 生命周期

二、发送网络请求

一、react 生命周期

        组件的生命周期是指组件从创建到最终的销毁的整个过程，在这个过程中有一些重要的、关键的时间点可以触发对应的函数，这些函数被称为钩子函数。

        通用的组件的一个周期为 创建 -> 挂载 -> 更新 -> 销毁，框架不同具体实现也不同。

        举例：点击按钮，通过一个变量的改变来控制组件的显示(渲染)与隐藏。

import React, { Component } from "react"; export default class App extends Component { state = { show: false, count: 10 }; render() { // es6结构语语法 const { show, count } = this.state; return ( 
   
 
     this.setState({ show: !show })}> 隐藏/显示  {show ? 
     : null} 
   
 ); } } class Son extends Component { render() { return 
   

     { border: "2px solid purple" }}>我是子组件 
   
; } } 

        效果如下，点击按钮控制组件的显示隐藏；

react 生命周期勾子函数： 

        componentDidMount：组件挂载完毕，发送网络请求时放于此勾子函数中；

        componentDidUpdate：组件更新完毕；

        shouldComponentUpdate：页面操作中最消耗性能的是 DOM 渲染操作，通过此函数可以确定哪些时候需要 DOM 重绘；

        componentWillUnmount：组件将要卸载，资源回收时可写于此；

import React, { Component } from "react"; export default class App extends Component { state = { show: false, count: 10 }; render() { // es6解构语法 const { show, count } = this.state; return ( 
   
 
     this.setState({ show: !show })}> 隐藏/显示  {show ? 
     : null} 
     this.setState({ count: count + 10 })}> 加十操作  
   
 ); } } class Son extends Component { componentDidMount() { console.log("componentDidMount：组件挂载完毕"); } componentDidUpdate(props, state) { console.log("componentDidUpdate：组件更新完毕"); // props 外部传入组件的值 console.log("更新前的props：", props); console.log("更新后的props：", this.props); // state 组件内部的状态值 console.log("更新前的state：", state); console.log("更新后的state：", this.state); } shouldComponentUpdate(props, state) { console.log("shouldComponentUpdate：决定是否更新DOM"); console.log('state修改为：',state) // 举例：当num为偶数时不渲染 if (state.num % 2 === 0) return false; // 默认返回true，正常渲染 return true; } componentWillUnmount() { console.log("componentWillUnmount：组件将要卸载"); } state = { num: 1 }; render() { return ( 
   

     { border: "2px solid purple" }}> 
    

      我是子组件 
    
 {/* 点击按钮修改值 */} 
     this.setState({ num: this.state.num + 1 })}> 加一操作  
    

      num:{this.state.num} 
    
 {/* 子组件用props接收值 */} 
    

      count:{this.props.count} 
    
 
   
 ); } } 

二、发送网络请求

        浏览器客户端通过 XHR 对象发送网络请求。不同的框架中也可以配合不同的第三方库实现发送请求的操作；

举例：通过发送网络请求获取斗鱼的直播间列表并渲染到页面上

        src -> App.js

import React, { Component } from 'react' export default class App extends Component { componentDidMount(){ const url = "/douyu/api/room/list?page=1&type=yz" fetch(url) .then((res)=>res.json()) .then((res)=>{ console.log(res); }) } render() { return ( 
   
 
   
 ) } } 

如果这样直接获取是无法成功的，会有如下的跨域问题，所以需要进行跨域处理；

 跨域处理（proxy代理方式）

        首先安装 proxy 模块 http-proxy-middleware；

        在项目目录下使用命令 npm i http-proxy-middleware 进行安装，完成以后如下显示且没有报错则说明安装成功：

proxy 模块安装完成之后在目录 src 下新建代理配置文件 setupProxy.js 并进行配置；

        src -> setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware"); // 导出 module.exports = function (app) { // 代理段1 app.use( createProxyMiddleware("/douyu", { target: "http://m.douyu.com", changeOrigin: true, secure: true, pathRewrite: { "^/douyu": "" } }) ) // 有多段时继续.use即可 // app.use() }

配置完成后重启项目，可以看到，数据请求成功；

有了数据后，开始页面的展示；

        src -> App.js

import React, { Component } from 'react' // 引入css文件 import "./App.css" export default class App extends Component { // 将获取到的数据存至state state = { data:null } componentDidMount(){ const url = "/douyu/api/room/list?page=1&type=yz" fetch(url) .then((res)=>res.json()) .then((res)=>{ console.log(res); this.setState({data:res.data}) }) } showRooms = ()=> this.state.data.list.map((item,index)=>( 
     
 
       
       

         {item.hn} 
       
 
       

         {item.nickname} 
       
  
     
 )) render() { // 在网络数据没有加载回来之前 是不会渲染页面的 if(this.state.data == null) return 
     
 // 调用方法渲染页面 return 
     

       {this.showRooms()} 
     
; } } 

        src -> App.css

.douyu-cell { width: 200px; margin: 5px; display: inline-block; } .douyu-cell img { width: 100%; border-radius: 5px; display: block; } .douyu-cell>div:first-child { position: relative; color: wheat; } .douyu-cell>div:first-child>div:first-of-type { position: absolute; top: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); font-size: 0.8rem; padding: 3px; }

效果如下：