首先,react是Facebook开发的一套前端框架,仅仅是MVC中的V。核心思想是“封装组件”,组件封装后可以作为一个独立的实体被引入到新的组件中,这样新的组件就又是一个实体了,由于组件的实现了可复用,所以是大大减小了开发的工作量。

*react的值可以分为私有公有,私有的值一般就用this.state来表示了比如:

<Input type="password" before={passwordIcon} name="passwordAgain" id="againPassword“onChange={this.handleAgainChange} value={this.state.passwordAgain} error={this.state.error} placeholder="确认密码"/>,

和这个相关的就是setState了,一般用在事件里面,用来更改数据。

handleChange(e) {
this.props.validate(e.target.value); this.setState({passwordAfter: e.target.value});
}

不过这样的话浏览器会报错说setState没有定义,解决方法呢就是要再构造函数里bind一下,像这样:this.handleChange = this.handleChange.bind(this);

*公有的呢就是props了,props用于父子组件之间的通信,super(props);放在构造函数里就可以把父组件里的属性继承下来了,当需要从父组件继承的时候,使用this.props就可以了,如下:

handleClick() {
this.props.onSubmit(this.state.passwordBefore, this.state.passwordAfter, this.state.passwordAgain);
}

*react的生命周期基本上就是组件执行的过程了:

第一步执行的是getInitialState,只在组件装载之前调用一次;

第二步是getDefaultProps,作用是只在组件创建时调用一次并缓存返回的对象。

第三步执行的是render,使用原生html标签或者子组件组装生成这个组件的html结构,也可以返回 null 或者 false,这时候 ReactDOM.findDOMNode(this) 会返回 null。

第四步:装载组件触发:componentWillMount 只会在装载之前调用一次,在 render 之前调用,你可以在这个方法里面调用 setState 改变状态,并且不会导致额外调用一次 render。componentDidMount 只会在装载完成之后调用一次,在 render 之后调用,从这里开始可以通过ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。

更新组件触发:(内嵌循环执行的)

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

这些组件不会在首次render组件的周期调用。

最后一步呢是卸载组件触发:componentWillUnmount

*以上为react的一些基本概念,一些比较好的学习资源跟大家分享一下:

1入门教程

2Facebook github上的使用文档,比较全

关于react的一点工作总结的更多相关文章

  1. 深入研究React setState的工作机制

    前言 上个月发表了一篇 React源码学习--ReactClass,但是后来我发现,大家对这种大量贴代码分析源码的形式并不感冒.讲道理,我自己看着也烦,还不如自己直接去翻源码来得痛快.吸取了上一次的教 ...

  2. react的模型:react是如何工作的?

    1.jsx:语法模型,语句构建模型: 2.组件:集合模型,组件管理: 3.vdom:分层模型.渲染管理模型: 4.flux:管道模型.数据模型,状态管理模型: 整体上是一个UI系统从上到下的构建: f ...

  3. 使用react的一点提醒17/10/26

    1.不直接操作dom 今天在和同学讨论的时候,发现了一些以前没注意的问题. 这段时间自己学习时一直都是用原生js写代码,但是以前在公司经常使用jq,也不知不觉间让我习惯了操作dom的倾向. 使用vue ...

  4. jquery中的一点工作小记

    在做一个页面的时候,网页中由许多块相同的地方 ,例如页面中会有多个地方用到TAB 效果,在使用each()遍历以后  不一定会正常显示,这是因为写的html静态页面中只有当前板块中有这个的类,若是用J ...

  5. React Native工作小技巧及填坑记录

    以下是本人在React Native开发工作中使用的一些小技巧,记录一下. 1.从网络上拉取下来的React Native缺少React和React Native库. 终端 1. cd 项目根目录 2 ...

  6. 从一个例子中体会React的基本面

    [起初的准备工作] npm init npm install --save react react-dom npm install --save-dev html-webpack-plugin web ...

  7. 颠覆式前端UI开发框架:React

    转自:http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react/ 基于HTML的前端界面 ...

  8. React笔记_(1)_react概述

    React概述   React是一种很好的前端技术. 它将应用打散成独立的小模块,然后进行组装,完成开发. react远比angularjs难学的多. react依赖的如webpack等各种工具得先学 ...

  9. 对React的理解

    转自:http://www.cocoachina.com/webapp/20150721/12692.html 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了R ...

随机推荐

  1. Docker swarm 实战-部署wordpress

    Docker swarm 实战-部署wordpress 创建一个overlay的网络 docker network create -d overlay demo 6imq8da3vcwvj2n499k ...

  2. AutoMapper项目实践

    本次示例,我们单独创建一个 AutoMapperService 的项目,用于放置映射配置文件,映射注册方法,映射公共方法. 1.映射配置文件 用于配置源实体到目标实体的映射 public class ...

  3. Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式

    1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ex ...

  4. easyui datagrid 动态改变行背景色

    /*根据查询条件查询调度单列表*/ function InitGrid(queryData) { $("#dg").datagrid({ loadMsg: "数据加载中, ...

  5. (一)java并发知识图谱

  6. 【ZeroMQ】2、高性能的通讯库-zeroMQ

    首先,让我来介绍一下什么是ZMQ(全称:ZeroMQ): 官方: “ZMQ(以下ZeroMQ简称ZMQ)是一个简单好用的传输层,像框架一样的一个socket library,他使得Socket编程更加 ...

  7. Angular环境搭建

    Angular4 随笔(一)----环境搭建 1.下载node.js 第一步:在浏览器中搜索node.js官网(https://nodejs.org/zh-cn/),根据自己系统下载相应版本,下载完成 ...

  8. ubuntu 18.04 设置固定ip

    # This file is generated from information provided by # the datasource.  Changes to it will not pers ...

  9. 【读书笔记】iOS-网络-理解错误源

    考虑一个字节是如何从设备发往运程服务器以及如何从远程服务器将这个字节接收到设备,这个过程只需要几百毫秒时间,不过确要求网络设备都能正常工作才行.设备网络和网络互联的复杂性导致了分层网络的产生.分层网络 ...

  10. centos7下采用Nginx+uwsgi来部署django

    之前写过采用Apache和mod_wsgi部署django,因为项目需要,并且想比较一下Nginx和Apache的性能,尝试采用Nginx+uwsgi的模式来部署django. 1.安装uwsgi以及 ...