一面(3) react方面
1.react的声明周期
- getDefaultProps()
- getInitialState()
- componentWillMount() 以后组件更新不调用, 只调用一次 能更改state。
- render() 创建虚拟dom,进行diff算法,更新dom树都在此进行 不能更改state
- componentDidMount() 组件渲染之后调用,只调用一次。 获取页面的初始数据 页面加载的时候请求数据
- componentWillReceiveProps(nextProps) 组件初始化时不调用,组件接受新的props时调用。
- shouldComponentUpdate(nextProps, nextState) react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新
- componentWillUpdata(nextProps, nextState) 组件初始化时不调用,只有在组件将要更新时才调用,可以修改state
- render()
- componentDidUpdate() 组件更新完成后调用,此时可以获取dom节点。
- componentWillUnmount() 组件将要卸载时调用,一些事件监听和定时器需要在此时清除。
2.父子之间的通信
父传子 父传递 <child name={ this.state.name}> 子接收 <div>{this.props.name}</div>
子传父 通常通过调用父亲的函数来更改值
父传子一个方法 <Child handleChange = {this.handleChange}> 这个方法是setstate父亲的数据的
子在需要操作的时候调用这个方法 this.props.handleChange(存在父组件的数据)
3.方法中this指向问题
在constructor中bind(this)或者直接用箭头函数
4.兄弟之间传递
redux store reduce
react-redux
一面(3) react方面的更多相关文章
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- 2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- React的使用与JSX的转换
前置技能:Chrome浏览器 一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
随机推荐
- CEF JS实现获取剪贴板图片的DataURL
转载:https://www.deanhan.cn/js-paste-upload.html 转载:https://segmentfault.com/a/1190000002915597 转载:htt ...
- DTS(待了解)
DTS(待了解) vs trasaction事务 脏数据 && 脏数据的清理 永远返回非空对象(忌:返回空值) 异常: invoker(trackTrace:debug.releas ...
- Linux (麒麟)系统 重启后无法登陆进图形界面
登录图形化界面的时候,会显示GNOME电源管理器没启动等提示信息,会一直卡在登录界面 在启动的时候按ESC或者在登录界面crtl+alt +f3 进入字符终端界面 查看物理存储空间占用信息,可能会有一 ...
- poi 导入Excle
一,AOP 是什么 Apache POI 提供java 程序对Microsoft Office格式文档的读写功能操作 二,所需要的jar包 三,实现代码 1, 读取Excle 返回Workbook格式 ...
- selenium java maven testNg环境搭建
maven获取jar的xml地址:http://mvnrepository.com 步骤一安装jdk(略) 步骤二 安装eclipse(略) 步骤三 安装testNG 步骤四 maven安装 步骤三 ...
- js中关于数组处理的一些小技巧
1 reduce方法同时实现map和filter 假设现在有一个数组,然后遍历它的每一项(map的功能)然后筛选出其中的一部分(filter的功能).如果使用map和filter的话,我们需要遍历这个 ...
- Kafka+OpenCV 实现实时流视频处理
1. 启动Kafka Server bin/kafka-server-start.sh config/server.properties & 2. 创建一个新topic bin/kafka- ...
- 深入理解Plasma(四)Plasma Cash
这一系列文章将围绕以太坊的二层扩容框架 Plasma,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等.本篇文章主要介绍在 Plasma 框架下的项目 Plasma Cash. 在上一篇 ...
- python3.7导入gevent模块报错的解决方案
最近更新了python解释器3.7 结果安装gevent,在导入gevent之后就报错了,错误信息如下 RuntimeWarning: greenlet.greenlet size changed, ...
- JavaScript进阶系列1:performace和console.time性能测试
测试性能的时候,三种方法: 1.使用new Date() 返回整数值ms var dtStart=new Date(); for(var i=0;i<15000;i++){ i=i; } var ...