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入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
随机推荐
- intellij代码跳转后跳回
跳转快捷键: ctrl+b 跳回的快捷键默认为 ctrl+alt+left 然而在我的电脑上并没有卵用,所以自己设置回退的快捷键,设置位置为: File/Setting/Keymap 选择 Main ...
- iOS-项目打包为ipa文件
最近自己做的一个项目,由于app store发布流程比较复杂,且审核周期较长,客户希望提前能看到产品,所以我先给自己的项目打包成一个ipa文件(类似Android的apk安装包),然后发布在" ...
- React Ajax
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取, 当从服务端获取数据库可以将数据存储在 state 中,再用 this.setState 方法重新渲染 ...
- python BeautifulSoup实例测验
- Symbols of String Pattern Matching
Symbols of String Pattern Matching in Introduction to Algorithms. As it's important to be clear when ...
- 18数据表&E-R模型&概念数据模型-下(选学)-天轰穿大话数据库视频教程
关键字:数据表 三大范式 外键 主键 数据表设计 天轰穿 sqlserver 数据库大纲:属性与主键,外键&联系,三大范式,设计表时应该考虑的因素 土豆超清地址: 优酷超清地址: 原文地址:h ...
- Log4cpp介绍及使用
Log4cpp是一个开源的C++类库,它提供了在C++程序中使用日志和跟踪调试的功能.使用log4cpp,可以很便利地将日志或者跟踪调试信息写入字符流.内存字符串队列.文件.回滚文件.调试器.Wind ...
- VS2010几款超赞的扩展辅助工具总结
详情请查看http://www.aehyok.com/Blog/Detail/72.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链 ...
- 【Android开发坑系列】如何让Service尽可能存活
流行的思路如下[2015-11-20更新]: 1.让Service杀不死.Service的onStartCommand返回START_STICKY,同时onDestroy里面调用startServic ...
- Jmeter之JDBC Request使用方法(oracle)
JDBC Request: 这个sampler可以向数据库发送一个jdbc请求(sql语句),它经常需要和JDBC Connection Configuration 配置元件一起配合使用. 目录: 一 ...