react js 之生命周期
react redux 结合是目前比较流行的前端开发框架,主要基于react 中的state 树为数据模型,借助redux 来控制 state 数据;下面直接从代码层面解析该框架中一个react 组件 成员函数的生命周期; 先给出一个redux 的数据流 模型图, 只关心react 生命周期的可以忽略;
/*** Created by suyuan on 16/11/9.*/import 'style/page/PostPage.scss' import {dispatch, changePostDataAction, getPostsData, updatePostsData} from 'action' // 定义了所有的action import Button from 'component/Button' // 组件 import Post from 'component/Post' // 单片帖子组件// 定义自己的页面,或者组件 PostPage, 下面安装调用次序给出了每个成员函数的解释, class PostsPage extends React.Component { //继承后必须实现父类的方法 render//--------------Mounting(理解为第一次调用组件渲染)方法,目前有4个 constructor, componentWillMount, render, componentDidMount,// 1.1 构造// 在第一次构造组件时调用,继承父类,所以必须有第一句super(props),否则props不会传入父类,可能引起bug// 用途:一般用来初始化状态和绑定函数, 每个组件自己拥有一个state,不同的组件之间互相不影响;// 这里我们没有在构造函数中初始化 state,是因为用了redux 框架,真正的state 在外围的store中管理,传入的数据都在props中constructor(props) {super(props);}// 1.2 将要组装(翻译不准确)// 在render 之前调用,在这个方法中调用setState()不会重新渲染组建;// 一般不需要在该方法中做做操,用constrcutor的功能就可以了, 此方法中避免引入任何的副作用componentWillMount() {}// 1.3 渲染// 检查 props 或者state, 然后返回一个react对象,或者又其它组件组成的对象;也可以返回 null 或者false 表明不做渲染;// 该函数不可以有副作用,意思就是不能修改state,即不可以调用setState(),// 不可以和浏览器进行交互, 如果需要和浏览器交互,比如获取cookie 数据,应该在其它的函数中,比如componentWillMount 或者componentDidMountrender(){return (<div className="post-parent"><h2>帖子</h2>{this.props.posts_data.map((item, index, items)=>{return (<Post index={index} title={item.title} uri={item.uri} image={item.image} type={item.type} onDataChange={(post)=>this.onChange(index,post)} />)})}<div className="btn"><Button type="secondary" onClick={this.onUpdate}>更新</Button></div></div>)}// 自定义的内部函数,当页面的数据被用户修改后,发送changeIconDataAction, 在reducer 中更新状态,这里不是本节重点,暂时略过onChange=(i, post)=>{dispatch(changePostDataAction(i, post));}// 自定义内部函数, 当需要保存修改过的信息时,调用onUpdate=()=>{dispatch(updatePostsData(this.props.posts_data));}// 1.4 完成组装后// 初始化后,渲染后才触发, react 中继承的方法有一个特点,Did是表示在动作完成后执行的函数, will是指在动作完成前执行的函数// 这个方法很有用, 一般进行网络请求获取数据在这里进行,里面的setState 会导致render 重新执行componentDidMount() {dispatch(getPostsData()); // 发出post 请求帖子数据, 这里的action 发出后会去做post网络请求, 一般由中间件完成post请求}//-----到这里整个页面自动的渲染工作就结束了,后面当对页面做一些数据修改的操作,会用到下面的成员函数//-----以下称为updating方法, 当改变了props 或者state 后,下面这些方法会被执行//2.1 接受props前// 每次接受新的props触发, 这里有个注意点,state发生变化后是不会触发函数调用的,该函数调用关心的是props,// 注意:在接受到新的props 后,如果你需要更新state, 可以在此处执行setState, 这里可以看作完成状态变化的工作// state 和props 可以做个理解,props 是父组件传给自己的参数,但是自己也可以维护一个state, 部分数据用props, 部分数据用state, 比如计算props里面的post 数量放在state中componentWillReceiveProps(nextProps) {}//2.2 是否需要重新渲染// 如果该返回false, render将不会被调用,表示组件不需要更新, 默认情况下每次state变化后返回true, 初始化渲染或者forceUpdate 的时候是不会调用该成员函数// 当返回false的时候,子组件的state变化还是会继续渲染; 但是本组件的 componentWillUpdate(),render(), and componentDidUpdate() 不会被调用shouComponentUpdate(nextProps, nextState){}// 2.3 将要重新渲染// 第一次初始渲染的时候不会调用,当接受到新的 props 或者state的时候,使用该方法来做更新组件前的准备工作// 注意,在这里不要调用this.setState(), 如果需要更新state,在 componentWillReceiveProps 中调用,我的理解是 此时的nextState 已经ok, 就不要再改变了componentWillUpdate(nextProps, nextState){}// 2.4 render() 重新执行1.3 的渲染函数// 2.5 组件更新后componentDidUpdate(){}// 2.* Unmounting 当改组件从DOM 中移除时,调用此方法componentWillUnmount(){}/* OtherApis 每个组件都提供了一些成员函数调用接口1.setState(nextState, callback) 第一个参数是需要更新的状态,第二个参数是一个回调,表示状态更新完成后执行动作,一般不需要,直接用componentDidUpdate 代替回调函数作用即可注意:setState 类似一个异步接口,不会立即修改state,这里不实现同步的原因应该是 setState 里面是一个批处理,以改善setState的性能setState 一定会重新render组件,所以要保证需要的时候才调用,或者通过控制shouldComponentUpdate() 返回bool值,避免无意义刷新2.forceUpdate() 如果组件依赖与其它数据,此时希望强制重新渲染,调用后跳过shouldComponentUpdate(), 其它生命周期的函数正常调用*//* Class 成员属性1.defaultProps 默认属性值,2.displayName 一般不关心,react自动赋值3.propTypes 需要属性类型*//* 对象实例 成员属性, 所有有意义的数据都在他们里面, 设计好每个组件的state和props 是成功的第一步1.props2.state*/}// redux 会自动调用,通过下面的connect 绑定到组件上, 所有的reducer 操作后返回的newstate 都会进入这个mapStateToProps 函数, // 次函数把感兴趣的数据取出来, 以props的形式给绑定的组件 const mapStateToProps=(state, props)=>{var posts_data = state['api'][APIS.HOME.GET_POSTS_DATA] || [{'id': 1,'title': '','type': 1,'url': '','icon': ''},{'id': 2,'title': '','type': 1,'url': '','icon': ''},{'id': 3,'title': '','type': 1,'url': '','icon': ''},{'id': 4,'title': '','type': 1,'url': '','icon': ''},];// 注意使用切片操作,这样才能更新 render,不然内容地址不变,里面的内容变了也不会刷新, 感觉这是redux 的坑return Object.assign({}, {'post_data': posts_data.slice()}); }// redux 框架中非常重要的 connect 函数, mapStateToProps映射函数绑定到组件, 组件接受store的影响, store 通过reducer 创建出来, reducer 接受 action 处理state export default connect(mapStateToProps)(PostsPage);
转载于:https://www.cnblogs.com/suyuan1573/p/6045465.html
react js 之生命周期相关推荐
- React学习:生命周期、过滤器、event、axios-学习笔记
文章目录 React学习:生命周期.过滤器.event.axios-学习笔记 生命周期 过滤器 webapp小例子: event - 和原生JavaScript写法一样的 axios React学习: ...
- React 初探 [五] React 组件的生命周期
说起生命周期,最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期,再者是Vue 组件,那么今天要梳理的是React 组件的生命周期,可见对生命周期的理解和掌握对组件 ...
- jsonp react 获取返回值_谈谈对 React 新旧生命周期的理解
前言 在写这篇文章的时候,React 已经出了 17.0.1 版本了,虽说还来讨论目前 React 新旧生命周期有点晚了,React 两个新生命周期虽然出了很久,但实际开发我却没有用过,因为 Reac ...
- React的组件生命周期
1. 挂载卸载过程 1.1.constructor() 1.2.componentWillMount() 1.3.componentDidMount() 1.4.componentWillUnmoun ...
- [js] 说说你对js对象生命周期的理解
[js] 说说你对js对象生命周期的理解 一切皆对象 咱们经常听到JS中"一切皆对象"?有没有问想过这是什么意思?其它语言也有"一切皆对象"之说,如Python ...
- React 组件的生命周期
目录 前言 一.React 实例的生命周期及其与 Hooks 的映射 1.旧的生命周期图 2.新的生命周期图 3.新旧生命周期及其与 Hooks 的映射表 二.部分生命周期详解 1.getDerive ...
- React组件的生命周期
react组件的生命周期 文章目录 react组件的生命周期 总览 挂载时 更新时 卸载时 被移除的生命周期 总览 React的生命周期大体可以分为三个部分,一,挂载阶段:二更新阶段三,卸载阶段 挂载 ...
- React:新旧生命周期及其对比
文章目录 概述 生命周期(旧) 挂载时 更新时 父组件render setState forceUpdate 卸载时 生命周期(新) 挂载时 更新时 卸载时 新旧生命周期的对比 概述 不管是vue还是 ...
- React State和生命周期 3
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 一:组件的生命周期 组件的生命周期可分成三个状态: 安装:已插入真实DOM 更新:正在被重新渲染 卸载:已移出 ...
最新文章
- DevOps是软件研发的洗碗机
- Java 正则表达式格式化时间显示
- myeclipse中的classpath .
- heic怎么查看,如何打开heic
- 亿些模板【数据结构】
- input和output哪个是充电_input是什么接口?告诉大家这个小常识,以后音箱接线更容易...
- Java 虚拟机 最易理解的 全面解析
- jquery modile 笔记
- asp.net MVC错误:uses 'System.Web.WebPages, Version=2.0.0.0, ....which has a higher version...
- Angular通过XHR加载模板而限制使用file://(解决方案)
- 【Android 异常】 Parcelable encountered IOException writing serializable object
- SuperSocketClientEngine
- 记录android离屏渲染的一些资料
- 夜神模拟器如何设置自动代理
- 小程序码 踩坑记录(buffer转成图片显示问题)
- Emacs-057-hippie-expand使用
- pmu2008终端服务器,PMU升级指导.doc
- u盘插到电脑计算机里没有反应,U盘插入电脑没有反应 怎么查看是哪里坏了?
- 21天好习惯第一期-3
- 如何远程控制另外一台电脑