react 知识点
1.react内联样式写法:
<div style={{width:'200px',height:'100px',border:'1px solid red'}}>
</div>
react的内联样式是对象,所以这样写。第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。
2.react的事件写法:
onClick={this.handleClick}
注意:1)on后面的事件英文必须是大写;
2)事件用大括号{}括起来,事件函数后面不带小括号()。
3.refs的属性可以帮助我们突破虚拟DOM的限制,可以获取到DOM结构。
使用react-dom提供的专门操作DOM的方法:
ReactDOM.findDOMNode(this.refs.XXX)
4.设置state必须用setState:
this.setState({})
5.react要求array或iterator必须要有key。
Each child in an array or iterator should have a unique "key" prop.
循环array或itrator,写法:
var arr = ["aaa","bbb","ccc"];
var arrList = arr.map(function (value,index) {
return (
<li key={index}>{value}</li>
);
});
6.getInitialState:对于组件的每个实例来说,这个方法的调用有且只有一次,用来初始化每个实例的 state,在这个方法里,可以访问组件的 props。
getDefaultProps:对于每个组件实例来讲,这个方法只会调用一次,该组件类的所有后续应用,getDefaultPops 将不会再被调用。
每一个React组件都有自己的 state,其与 props 的区别在于 state只存在组件的内部,props 在所有实例中共享。
7.下面2种方式都可以通过ref获取真实DOM节点
var usernameDOM = ReactDOM.findDOMNode(this.refs.username);
var usernameDOM = ReactDOM.findDOMNode(this.refs['username']);
getDOMNode()方法:在react 0.13和0.14中提示一个错误,在15.0中完全移除(react 0.15版本命名为15.0了)。
8.React组件的生命周期图示:
9.组件之间传值:
1). props只能进行数据传递,不能修改,并且只能通过父组件传给子组件;例子(父组件传props给子组件):http://runjs.cn/detail/kzki5vgm
2). state(状态)用来保存交互的状态,每个组件自带state属性。不能在组件之间传递数据。
3). 组件之间传值可以找到这些组件之间共有的父组件,把state属性设置在父组件上。
10.父组件发生render的时候子组件就会调用componentWillReceiveProps(不管props有没有更新,也不管父子组件之间有没有数据交换)。
11.如果父组件中包含子组件,则父组件的componentDidMount
方法会在子组件执行完实例化周期后再执行。
12.组件生命周期图示:
13.组件使用:
在组件的挂载过程中,会依次调用 componentWillMount()、render() 和 componentDidMount()。挂载完成后,componentWillMount() 和 componentDidMount() 将不会再被触发,render() 则会根据 props 和 state 的变化多次执行。
在 componentDidMount() 调用之前,只能得到由 render() 返回的虚拟 DOM;在该方法执行时,真实 DOM 的渲染已经完成,此时,可以通过 ReactDOM 内建的 ReactDOM.findDOMNode() 访问真实的 DOM。
挂载结束后,组件处于监听状态,监听 props 和 state 的变化。props 和 state 的差异在于:state 用于配置组件内的状态,props 则用于在组件间传递数据。
在实际开发中,这一阶段调用的核心都是围绕 state 展开的。state changed 之后,系统会立即调用 boolean shouldComponentUpdate(object nextProps, object nextState) 方法来决定是否重新渲染页面。当遭遇性能瓶颈时,适当地通过该方法控制页面渲染的频率是为提升性能不二法门。
当 props changed 时,系统会立即调用 componentWillReciveProps(object nextProps) 方法。该方法常被用来执行 props -> state 的更新,继而触发整个页面的渲染。
在这一阶段重新渲染页面所需要的同样是 will -> render -> did 三个方法。不同之处在于,此处的 will 和 did 附加了 props 和 state 信息:
componentWillUpdate(object nextProps, object nextState) {
...
}
componentDidUpdate(object prevProps, object prevState) {
...
}
14.boolean componentWillUpdate(object nextProps, object nextState)
PureRenderMixin,ES6中的用法是:
import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
} render() {
return <div className={this.props.className}>foo</div>;
}
}
PureRenderMixin内进行的仅仅是浅比较对象。如果对象包含了复杂的数据结构,深层次的差异可能会产生误判。仅用于拥有简单props和state的组件。
render()
渲染之前更新 state 的机会。老的 props 可以通过 this.props
获取到。在该函数中调用 this.setState()
将不会引起第二次渲染。componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
react 知识点的更多相关文章
- React知识点总结1
最近打算把react知识点总结下: React特点 1.虚拟DOM 在内存中操作DOM,在内存中创建数据结构,只会更新有差异的地方 2.组件化 页面分成若干个组件,每个组件包含逻辑结构和样式 组件仅包 ...
- react知识点汇总
①uncontrolComponent & controlComponent If your form is incredibly simple in terms of UI feedback ...
- react 知识点2
从 render 函数可以看出来,组件内部是通过 this.props 的方式获取到组件的参数的,如果 this.props 里面有需要的属性我们就采用相应的属性,没有的话就用默认的属性. 那么怎么把 ...
- react知识点
http://www.cocoachina.com/webapp/20150721/12692.html http://blog.csdn.net/slandove/article/details/5 ...
- react知识点总结(持续更新。。。)
一.webpack 1. 什么是以及为什么要使用webpack 现在的网页功能越来越丰富,所需要的JavaScript和模块也会很多,为开发更加简洁,出现了以下方法,如模块化,scss,typescr ...
- React知识点整理
面试题:三大框架中数据绑定实现上有何绑定? 一.概述:是Facebook维护的一个构建用户界面的JS库,核心很精简,但是生态圈扩展很大. React:MVVM框架 React-Router:路由 Re ...
- 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>
Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...
- React实战一
目录 1. 搭建环境 2. React知识点 1. 组件 1.1 定义一个组件 1.2 组合与拆分组件 1.3 组件传值 1.4 state 1.5 生命周期函数 1.6 无状态组件 1.7 List ...
- React 解析/ 第二节 使用 Reac
官方脚手架 create-react-app React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpa ...
随机推荐
- UVA-10689 Yet another Number Sequence (矩阵二分幂模板)
题目大意:已知递推公式和边缘值,求某项的最后m(0<m<5)位数字. 题目分析:矩阵二分幂的模板题. 代码如下: # include<iostream> # include&l ...
- C/C++中 malloc和new区别
1. malloc与free是C++/C语言的标准库函数,new/delete是C++的运算符.它们都可用于申请动态内存和释放内存. new 是个操作符,和什么"+"," ...
- web移动端生产环境调试
如果是开发环境,比较容易: 最笨的方法是手机开QQ电脑开QQ把做好的页面传给手机QQ直接打开.. 参考: http://blog.allenm.me/2014/05/mobile-web-debug- ...
- 转载:移动端+微信小程序实现,手机端滑动分页代码思路(ajax)
//一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面//实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加 ...
- Idea检入boss项目
Idea检入boss项目
- bzoj1083
题解: 简单最小生成树 代码: #include<bits/stdc++.h> using namespace std; #define y1 ____y1 ; int z[N],f[N] ...
- VS2013中的快捷键大全
Visual Studio 2013 是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等等.VS 2013 中新增了很多提高 ...
- request应用实例
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...
- DevExpress v18.1新版亮点——ASP.NET篇(四)
用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress ASP.NET v18.1 的新功能,快来下载试用新版本!点 ...
- kbmMW集成JWT
如果对JWT不熟悉,需要先补下功课:初步理解JWT并实践使用 然后找到开源项目:https://github.com/paolo-rossi/delphi-jose-jwt