react----生周期及钩子函数

g生命周期钩子函数

https://react.docschina.org/docs/react-component.html

旧版本生命周期

1.挂载时 （初始化阶段）

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下

constructor() ： 加载的时候调用一次，可以初始化state

componentWillMount () : 组件加载时调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state ---- 在后续版本中将被废弃

render() : react的最重要的生命周期钩子函数，负责创建虚拟DOM，进行diff算法，更新DOM树

componentDidMount() ：组件渲染之后调用，只调用一次 --- 可以进行数据的请求，可以进行DOM的操作

2.更新时 （运行时阶段）

componentWillReceiveProps(nextProps) : 组件加载时不调用，组件接收新的props试调用 --- 一般可以在子组件中获取数据 ---- 在后续版本中将被废弃

shouldComponentUpdate(nextProps, nextState) : 组件收到信的props 和 state时调用，return true 就会更新dom（使用diff算法更新）,return false能阻止更新 --- 默认的返回值为true ---- 要不不写 ，要写必写返回值 --- react性能提升的一个关键

componentWillUpdate(nextProps, nextState) : 组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state ---- 在后续版本中将被废弃

render() : react的最重要的生命周期钩子函数，负责创建虚拟DOM，进行diff算法，更新DOM树

componentDidUpdate() : 组件加载时不调用，组件更新完成后可以调用 --- DOM操作，实例化

3.卸载时 （销毁阶段）

componentWillUnmount() : 组件加载时不调用，只调用一次

4.错误处理

componentDidCatch(err, info) : 任何一处的js报错都会触发

新版本生命周期

1.挂载时 （初始化阶段）

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下

constructor() ： 加载的时候调用一次，可以初始化state

static getDerivedStateFromProps (props, state) : 组件每次被rerender的时候，包括在组件构建（虚拟dom之后，实际dom挂载之前），每次获取新的props和state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state;配合componentDidUpdate,可以覆盖componentWillReceiveProps的所有用法 ---- 不常用

render() : react的最重要的生命周期钩子函数，负责创建虚拟DOM，进行diff算法，更新DOM树

componentDidMount() ：组件渲染之后调用，只调用一次 --- 可以进行数据的请求，可以进行DOM的操作

2.更新时 （运行时阶段）

static getDerivedStateFromProps (props, state) : 组件每次被rerender的时候，包括在组件构建（虚拟dom之后，实际dom挂载之前），每次获取新的props和state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state;配合componentDidUpdate,可以覆盖componentWillReceiveProps的所有用法 ---- 不常用

shouldComponentUpdate(nextProps, nextState) : 组件收到信的props 和 state时调用，return true 就会更新dom（使用diff算法更新）,return false能阻止更新 --- 默认的返回值为true ---- 要不不写 ，要写必写返回值 --- react性能提升的一个关键

render() : react的最重要的生命周期钩子函数，负责创建虚拟DOM，进行diff算法，更新DOM树

getSnapshotBeforeUpdate() : 触发时间： update发生的时候，在render函数之后，在组件DOM渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate，可以覆盖componentWillUpdate的所有用法 ---- 不常用

componentDidUpdate() : 组件加载时不调用，组件更新完成后可以调用 --- DOM操作，实例化

3.卸载时 （销毁阶段）

componentWillUnmount() : 组件加载时不调用，只调用一次

4.错误处理

componentDidCatch(err, info) : 任何一处的js报错都会触发

总结

React 16 新生命周期钩子函数 弃用了 componentWillMount、componentWillReceiveProps、componentWillUpdate

新增了 static getDerivedStateFromProps、getSnapshotBeforeUpdate来代替了componentWillMount、componentWillReceiveProps、componentWillUpdate

React16版本并没有删除那三个生命周期钩子函数，但是不能个新的生命周期钩子函数一起使用

React17版本将会全面删除弃用 componentWillMount、componentWillReceiveProps、componentWillUpdate

数据请求

• 参考vue的数据请求

接口文档
http://nz1908.wudaxun.top/apidoc/

fetch 的请求方式

axios 的请求方式

cnpm i axios -S

封装axios

像vue一样封装axios

拷贝vue项目中的src/api文件夹

修改了 api/request.js

 

--------------------------------------------------------------------文章来自吴大勋（大勋哥）链接