1. 生命周期
2. 旧钩子
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 * 1. constructor() * 2. componentWillMount() * 3.render() * 4. componentDidMount() ======> 常用 * 一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息 * * 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发 * 1. shouldComponentUpdate() * 2. componentWillUpdate() * 3. render() ====> 必须使用 * 4. componentDidUpdate() * 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发 * 1. componentWillUnmount() =====> 常用 * 一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息
3. 新钩子
/*1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 * 1. constructor() * 2. getDerivedStateFromProps() * 3.render() * 4. componentDidMount() ======> 常用 * 一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息 * * 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发 * 1. getDerivedStateFromProps() * 2. shouldComponentUpdate() * 3. render() ====> 必须使用 * 4.getSnapshotBeforeUpdate() * 4. componentDidUpdate() * 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发 * 1. componentWillUnmount() =====> 常用 * 一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息 * */
4. 常用钩子总结
- render:初始化渲染或更新渲染调用
- componentDidMount(组件加载完毕钩子):开启监听,发送ajax请求
- compoentWillUnmount(组件即将卸载钩子):做收尾工作的钩子,如清理监听器
5. map的key选用