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方面的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  3. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  4. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  5. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  6. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  7. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  9. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  10. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

随机推荐

  1. 对Activity的DecorView的包装(二)

    看了下公司的系统代码对于根布局decor_layout.xml的修改, 有所获. 前些时候才开始做系统开发的时候, 总想改改系统的源码, 至于原因: 人总是想装装, 在踩过几个别人修改的坑后, 还是觉 ...

  2. 查看mysql中sql语句执行时间

    查看mysql版本:select version();方法一: show profiles.1. Show profiles是5.0.37之后添加的,要想使用此功能,要确保版本在5.0.37之后.  ...

  3. fmt.Sprintf格式化使用

    格式化写法: fmt.Sprintf(格式化样式, 参数列表-) 参数说明: 格式化样式:字符串形式,格式化动词以%开头. 参数列表:多个参数以逗号分隔,个数必须与格式化样式中的动词个数对应,否则运行 ...

  4. 使用tp访问数据库时提示错误: 'PDO' not found, 和not defined constant mysql_attr_init_command 和call an undefined function Think\Template\simpleXml_load_string()函数

    第一个问题: PDO not found 是因为 php没有安装pdo扩展, 无法提供给 php 以 数据库访问功能, 所以 报错是在文件: Think/Db.class.php的里面. 解决方法是: ...

  5. 20165306 Exp2 后门原理与实践

    20165306 Exp2 后门原理与实践 实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 (3)使用MSF mete ...

  6. 前端学习之HTML

    HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5 ...

  7. HDFS详解

    HDFS详解大纲 Hadoop HDFS 分布式文件系统DFS简介 HDFS的系统组成介绍 HDFS的组成部分详解 副本存放策略及路由规则 命令行接口 Java接口 客户端与HDFS的数据流讲解 目标 ...

  8. Vue组件通信

    单向数据流通信 单向数据流通信是指父组件传递数据给子组件,子组件是不可以修改该数据的(可以改,但会警告) 父组件通过自定义属性传递数据给子组件,子组件使用props接收 如果想修改数据,子组件需要使用 ...

  9. vmware虚拟机安装vmware tools

    为了在主机与虚拟机之间共享文件,需要安装vmware tools.在安装vmware tools的过程中遇到了几个坑,在此记录一下. 一.虚拟机关机情况下进行设置.虚拟机->设置->CD/ ...

  10. 在webpack3里使用uglifyjs

    环境:webpac<4的场景下,安装uglifyjs. cnpm install uglifyjs-webpack-plugin -D 安装完毕后,去npm里查看uglifyjs的使用方法并添加 ...