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入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
随机推荐
- [读书笔记]C#学习笔记四: C#2.0泛型 可控类型 匿名方法和迭代器
前言 C#1.0的委托特性使方法作为其他方法的参数来传递,而C#2.0 中提出的泛型特性则使类型可以被参数化,从而不必再为不同的类型提供特殊版本的实现方法.另外C#2.0还提出了可空类型,匿名方法和迭 ...
- duilib进阶教程 -- 改进窗口拖动 (12)
现在大家应该都知道caption="0,0,0,32",是指示标题栏区了吧,如果想要整个窗口都能拖动呢? 那直接把高度改成和窗口一样不就得了~O(∩_∩)O~ 嗯,这样是可以,比如 ...
- asp提取声母源码
<% '****************************** '函数:getpychar(char) '参数:char,任意中文字符或句子 '作者:阿里西西 '日期:2007/7/15 ...
- DataWindow.Net 2.5 配置
在用过的所有的开发工具中,感觉最简单好用的就数PB了,他的DataWindow最方便,拖拖拽拽就把报表做好了,可惜现在很少人有用了.现在C/S系统一般用C#来做,但是做报表的时候总感觉没有DataWi ...
- 微信开发——OAuth2.0授权
微信公众平台最近新推出微信认证,认证后可以获得高级接口权限,其中一个是OAuth2.0网页授权,很多朋友在使用这个的时候失败了或者无法理解其内容,希望我出个教程详细讲解一下,于是便有了这篇文章. 一. ...
- $.ajax()方法解析
$.ajax()方法,在web网站开发中常用到,作为一种用于创建快速动态网页的技术(异步JavaScript和XML).通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以 ...
- 【VerySky原创】后台JOB运行-相关表
[VerySky原创] TBTCP 批作业步骤概述TBTCO 作业状态概述表TBTCS 批计划表TBTC_SPOOLID Background Processing Spool ...
- RabbitMQ的工作队列和路由
工作队列:Working Queue 工作队列这个概念与简单的发送/接收消息的区别就是:接收方接收到消息后,可能需要花费更长的时间来处理消息,这个过程就叫一个Work/Task. 几个概念 分 ...
- shell 控制输出格式 echo printf
(1)echo [A@XY log]$ echo -e "ab\t45" #带格式输出ab 45[A@XY log]$ echo "ab\t45" ...
- 微信公共账号开发：48001 api unauthorized解决
微信公众平台开发:获取token成功并且拉取自定义菜单也OK,但是在拉取用户信息和分组信息 是总是出现这个 {"errcode":48001,"errmsg": ...