一、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 ( <div> <button onClick={() => this.setState({ show: !show })}> 隐藏/显示 </button> {show ? <Son /> : null} </div> ); } } class Son extends Component { render() { return <div style={{ border: "2px solid purple" }}>我是子组件</div>; } }
效果如下，点击按钮控制组件的显示隐藏；
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 ( <div> <button onClick={() => this.setState({ show: !show })}> 隐藏/显示 </button> {show ? <Son count={count} /> : null} <button onClick={() => this.setState({ count: count + 10 })}> 加十操作 </button> </div> ); } } 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 ( <div style={{ border: "2px solid purple" }}> <div>我是子组件</div> {/* 点击按钮修改值 */} <button onClick={() => this.setState({ num: this.state.num + 1 })}> 加一操作 </button> <div>num:{this.state.num}</div> {/* 子组件用props接收值 */} <div>count:{this.props.count}</div> </div> ); } }
二、发送网络请求
浏览器客户端通过 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 ( <div> </div> ) } }
如果这样直接获取是无法成功的，会有如下的跨域问题，所以需要进行跨域处理；
跨域处理（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)=>( <div key={index} className='douyu-cell'> <img src={item.roomSrc} alt="" /> <div>{item.hn}</div> <div>{item.nickname}</div> </div> )) render() { // 在网络数据没有加载回来之前 是不会渲染页面的 if(this.state.data == null) return <div></div> // 调用方法渲染页面 return <div>{this.showRooms()}</div>; } } 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; }
效果如下：
