React JS 基础知识17条
1. 基础实例
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
说明：
(1).react.js：React 的核心库。
(2).react-dom.js：提供与 DOM 相关的功能。
(3).Browser.js：将 JSX 语法转为 JavaScript 语法。这一步很消耗时间，实际上线的时候，应该将它放到服务器完成，操作如下：
$ babel src --out-dir build
将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
(4).text/babel：凡是使用 JSX 的地方，都要加上 type="text/babel"。
2. ReactDOM.render()
用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
3. JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
4. React.createClass()
生成一个组件类。
5. class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
6. React.Children.map()
用来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 、object 、array。
this.props.children 的值有三种可能：
数据类型undefined：当前组件没有子节点;
数据类型object：有一个子节点；
数据类型array: 有多个子节点。
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
姊妹属性还有：
React.Children.map ：遍历，返回对象
React.Children.forEach ：遍历，不返回对象
React.Children.count ：返回 children 当中的组件总数
React.Children.only ：返回 children 中仅有的子级。否则抛出异常
7. 组件类的 PropTypes 属性，就是用来验证组件实例的属性是否符合要求
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,//只接受string类型的，且必须传
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
姊妹属性：
React.PropTypes.array
React.PropTypes.bool
React.PropTypes.func
React.PropTypes.number
React.PropTypes.object
React.PropTypes.string
React.PropTypes.node // 所有可以被渲染的对象：数字，字符串，DOM 元素或包含这些类型的数组。
React.PropTypes.element // React 元素
React.PropTypes.instanceOf(Message) // 用 JS 的 instanceof 操作符声明 prop 为类的实例
React.PropTypes.oneOf(['News', 'Photos']) // 用 enum枚举 来限制 prop 只接受指定的值。
React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number,React.PropTypes.instanceOf(Message)]) // 指定的多个对象类型中的一个
React.PropTypes.arrayOf(React.PropTypes.number) // 指定类型组成的数组（如只接受数字组成的数组）
React.PropTypes.objectOf(React.PropTypes.number) // 指定类型的属性构成的对象（如只接受数字组成的对象）
React.PropTypes.shape({color: React.PropTypes.string,fontSize: React.PropTypes.number}) // 特定形状参数的对象（字符串颜色，数字字体） 以后任意类型加上 'isRequired' 来使 prop 不可空。
React.PropTypes.func.isRequired
React.PropTypes.any.isRequired //不可空的任意类型
8. getDefaultProps()设置组件属性默认值
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'//没传递就用默认值
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
9. ref 获取真实DOM
React组件生成的是虚拟DOM，只有插入到页面中后才能变成真实的DOM。
任何DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();// this.refs.myTextInput 获取真实的Input DOM
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
说明：
(1) 由于真实DOM发生在虚拟DOM之后，所以this.refs.[refName]必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。
(2) ref是获取当前节点的真实DOM；this.getDOMNode()是获取真个组件的真实DOM；两者都必须要在组件加载完成后使用。
10. React 事件
剪贴板事件：
onCopy
onCut
onPaste
键盘事件：
onKeyDown
onKeyPress
onKeyUp
鼠标事件：
onClick
onDoubleClick
onDrag
onDragEnd
onDragEnter
onDragExit
onDragLeave
onDragOver
onDragStart
onDrop
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onWheel ：鼠标滚轮滚动事件
触摸事件：
onTouchCancel
onTouchEnd
onTouchMove
onTouchStart
焦点事件：
onFocus
onBlur
表单事件：
onChange
onInput
onSubmit
UI 事件：
onScroll
事件说明参考：http://reactjs.cn/react/docs/events.html
11. this.state 和 this.props
每个React组件都是一个状态机，一旦状态改变（与用户发生交互）就会重新渲染组件，这就是 this.state。
每个组件又有初始化所需要的数据，一旦初始化完成，该数据就不再变动，这就是 this.props。
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
12. 表单
表单包括：input、textarea、checkbox、radio、option.
监听表单组件变化使用 onChange 事件，通过以下属性获取对应值：
value：表单input、textarea;
checked：表单checkbox、radio；
selected：表单option。
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.body);
13. 组件生命周期
生命周期三个状态：
（1）Mouting：已插入真实 DOM
（2）Updating：正在被重新渲染
（3）Unmounting：已移出真实 DOM
三个状态对应 5 个函数 + 2 个特殊处理：
（1）componentWillMount：初始化渲染之前调用（只在第一次渲染时调用，后续重新渲染、修改props/state 都不在调用）。
允许调用setState()，组件直接使用新的state，而不会引起第二次渲染。
（2）componentDidMount：初始化渲染之后调用（只在第一次渲染时调用，后续重新渲染、修改props/state 都不在调用）。
jQuery操作DOM（如ref、getDOMNode使用）、调用外部JS方法（通过props传递）等都可以在这里操作。
（3）componentWillUpdate：修改props/state 重新渲染之前调用（第一次渲染时不调用）。
不允许调用setState()，会造成死循环。
（4）componentDidUpdate：修改props/state 重新渲染之后调用（第一次渲染时不调用）。
不允许调用setState()，会造成死循环。
jQuery操作DOM（如ref、getDOMNode使用）、调用外部JS方法（通过props传递）等都可以在这里操作。
（5）componentWillUnmount：组件被移除时调用（比如在div中渲染组件1，然后再渲染组件2,此时组件1被移除）。
执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。
（6）componentWillReceiveProps(object nextProps)：修改props 重新渲染 之前调用（第一次渲染时不调用；如果props和之前一样，也会执行）。
允许调用setState()，组件直接使用新的state，而不会引起第二次渲染。
该方法中this.props可以获取老props，参数nextProps才表示新的props。
（7）shouldComponentUpdate：是否需要重新渲染组件。修改props/state 重新渲染之前调用（第一次渲染时不调用）。
true 表示需要重新渲染；false 表示不需要重新渲染，即不会调用后续的componentWillUpdate 和 componentDidUpdate。
优化性能的关键函数：该方法可以实现新老props 和 state 的比对逻辑，自定义是否重新渲染。组件较多时，可提升性能。
总结：
各个生命周期函数的先后顺序：
初始化渲染阶段：componentWillMount > componentDidMount
修改state 阶段：shouldComponentUpdate > componentWillUpdate > componentDidUpdate
修改props 阶段：componentWillReceiveProps > shouldComponentUpdate > componentWillUpdate > componentDidUpdate
旧组件卸载阶段：旧组件 componentWillUnmount > 新组件生命周期
生命周期测试实例：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
console.log('组件1getInitialState被执行');
return {
name: this.props.name
};
},
componentWillMount: function() {
console.log('组件1：componentWillMount');
},
componentDidMount: function() {
console.log('组件1：componentDidMount');
},
componentWillUpdate: function() {
console.log('组件1：componentWillUpdate');
// this.setState({name: '内部componentWillUpdate更新state'});//会造成死循环，一直加载组件
},
componentDidUpdate: function() {
console.log('组件1：componentDidUpdate');
},
componentWillUnmount: function() {
console.log('组件1：被卸载：componentWillUnmount');
},
componentWillReceiveProps: function(nextProps) {
console.log('组件1：componentWillReceiveProps：老props：'+this.props.name+';新props：'+nextProps.name);
},
shouldComponentUpdate: function() {
console.log('组件1：shouldComponentUpdate');
return true;// true 表示需要重新渲染；false 表示不需要重新渲染，即不会调用后续的componentWillUpdate和componentDidUpdate。
},
handleClick: function(event) {
console.log('修改state重新渲染组件1：');
this.setState({name: '内部更新state'});
}, render: function () {
return (
<div onClick={this.handleClick}>
Hello {this.state.name}
</div>
);
}
}); var Hello2 = React.createClass({
getInitialState: function () {
console.log('组件2：getInitialState被执行');
return {
name: this.props.name
};
},
componentWillMount: function() {
console.log('组件2：componentWillMount');
},
componentDidMount: function() {
console.log('组件2：componentDidMount');
},
componentWillUpdate: function() {
console.log('组件2：componentWillUpdate');
},
componentDidUpdate: function() {
console.log('组件2：componentDidUpdate');
},
componentWillUnmount: function() {
console.log('组件2：被卸载：componentWillUnmount');
},
componentWillReceiveProps: function(nextProps) {
console.log('组件2：componentWillReceiveProps：老props：'+this.props.name+';新props：'+nextProps.name);
},
shouldComponentUpdate: function() {
console.log('组件2：shouldComponentUpdate');
return true;
}, render: function () {
return (
<div>
Hello {this.state.name}
</div>
);
}
}); ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example')
); setTimeout(function(){
console.log('修改props重新渲染组件1：');
ReactDOM.render(
<Hello name="world2"/>,
document.getElementById('example')
);
}, 3000) setTimeout(function(){
console.log('初始化渲染新组件2：');
ReactDOM.render(
<Hello2 name="组件2 world2"/>,
document.getElementById('example')
);
}, 6000)
</script>
</body>
</html>
14. React组件样式
React采用行内样式，它接受的必须是一个对象，行如：
style={{display:'none'}}
第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
说明：
（1）React 行内样式采用驼峰形成，且不支持CSS中的'-'形式表示,如z-index 需写成 zIndex。
（2）浏览器前缀的样式（如-webkit-transition），首字母必须大写，但是ms 开头的例外。
var divStyle = {
color: 'white',
zIndex: 1000,
paddingTop:"10px",
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // 注意这里的首字母'W'是大写
msTransition: 'all' // 'ms'是唯一一个首字母需要小写的浏览器前缀
};
React.render(<div style={divStyle}>Hello World!</div>, mountNode);
15. Ajax请求
在实际项目中，我们通常是只把React 用于DOM渲染，而Ajax请求和逻辑判断放在外部JS中。
如果想在React组件中调用Ajax，可以在 componentDidMount 方法中发起 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI。
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
);
16. getInitialState()
初始化渲染之前调用（只在第一次渲染时调用，后续重新渲染、修改props/state 都不再调用）。
所以 getInitialState 中使用props 赋值时，后续重新渲染组件，state 的值将不会被新 props 覆盖。
getInitialState 的执行早于生命周期中的其他方法。
17. getDOMNode()
获取 React 组件的 DOM 结构。一般我们会在 componentDidMount 、componentDidUpdate 中使用，用于调用调用第三JS组件（因为第三JS组件都需要DOM结构）。
参考：http://blog.csdn.net/lihongxun945/article/details/46640225
整理自：http://www.ruanyifeng.com/blog/2015/03/react.html
React JS 基础知识17条的更多相关文章
- React.js基础知识
一. react.js的基本使用方法 (1)快速使用,hello world <div id="app"></div> <script src=&qu ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- NodeJs>------->>第三章：Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
- React.js学习知识小结（一）
学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上 ...
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
随机推荐
- 【转】The difference between categorical（Nominal ）, ordinal and interval variables
What is the difference between categorical, ordinal and interval variables? In talking about variabl ...
- paip.jdbc 连接自动释放的测试
paip.jdbc 连接自动释放的测试 使用的mysql jdbc3.1.6 以及5.1.7 测试结果,在没有conn.close()的情况哈.. 作者Attilax 艾龙, EMAIL:146 ...
- iOS开发-动态和静态FrameWork
开发中我们会使用到第三方的SDK,有的时候也会将整个系统的公用的功能的抽象出来成为FrameWork,我们只需要暴露对外的接口,使用者只需要调用接口,对于内部实现的过程不需要维护,可以以库的形式进行封 ...
- 详解Bootstrap按钮组件（二）
按钮下拉菜单 按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的.它们唯一的不同是外部容器div.dropdown换成了div.btn-group <div class="btn-g ...
- python中os和sys模块的详解
平时在工作中经常会用到os模块和sys模块的一些特性,下面是这些特性的一些相关解释,希望对大家有所帮助 os模块 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os. ...
- 在线测试 ssl 安全性
记录下, https://www.ssllabs.com/index.html
- Spring3.3 整合 Hibernate3、MyBatis3.2 配置多数据源/动态切换数据源 方法
一.开篇 这里整合分别采用了Hibernate和MyBatis两大持久层框架,Hibernate主要完成增删改功能和一些单一的对象查询功能,MyBatis主要负责查询功能.所以在出来数据库方言的时候基 ...
- ios取证
摘录自:<IOS取证实战> Andrew Hoog著 viaForensics公司,今年已经募集到1600万创业基金 2007-2011年初,AT&T是在美国唯一为iphone提供 ...
- NGUI 减少drawcall规则
前置说明一: Unity中的drawcall定义: 每次引擎准备数据并通知GPU的过程称为一次Draw Call. Unity(或者说基本所有图形引擎)生成一帧画面的处理过程大致可以这样简化描述:引擎 ...
- Asp.net Core WebApi 返回JSON自动驼峰格式化问题
从今天开始,正式进入Asp.net Core的开发,估计最近一段时间会经常写博客了,记录学些Asp.net Core中遇到的各种坑. 第一个问题:通过core编写的webapi,默认返回的json会自 ...