React系列（一）：React入门
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了React系列（一）：React入门，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5744字，纯文字阅读大概需要9分钟。
内容图文
React简介
1.由来
React是有Facebook开发出来用于构建前端界面的JS组件库，由于其背后的强大背景，使得这款库在技术开发上完全没有问题。
2.React的优势
解决大规模项目开发中数据不断变化变得难以操作的问题；
组件化开发，使得开发更加快速；
单向数据流，有利于找到问题；
虚拟DOM，在React内部有一套diff算法可以快速的计算出整体需要改动的位置，从而做到快速局部刷新；举个栗子：删除一个列表再插入个新表，计算后会比较出不同然后插进去；
JSX的编译方式，将HTML代码和JS混合到一起来写，组件结构清晰，数据结构清晰，之后可以通过工具转成JS。
3.开发方式
使用React开发可以像平常开发一样， 最后讲JSX转换一下即可，在0.14，React拆分开，所以我们需要引入三个文件
<
script
src
="../js/react.js"
></
script
>
<
script
src
="../js/react-dom.js"
></
script
>
<
script
src
="../js/JSXTransformer.js"
></
script
>
第一个不解释，第二个文件作用是将React结构转换成HTML后插入到指定的DOM节点，第三个为转换文件，将JSX格式转换成JS格式的文件。当然正常情况下还需要引入我们写的组件（如果你没直接把组件写在HTML里的话= =#）
另外一种开发方式就是基于node环境开发，配合webpack，gulp打造一套自动化构建工具，同时在Node里开发我们还可以配合babel使用ES6语法来编写，这里不细说。
基本语法
1.Hello World
一切语言的学习开始都是我们熟知的这个短语~在将React转换为HTML结构的时候需要用到ReactDOM.render
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘div1‘)
);
插入之前引入的JS和这个JSX文件就可以打开浏览器看一下了~
可以看到ReactDOM.render中第一个参数为传入的组件，第二个参数为加入到某个标签里，注意，一般情况下最好不要直接添加到document.body中。
2.组件的编写
但这显然离我们说的组件化还有十万八千里，举个简单的例子，一个简单的上中下结构的网页我们可以给它拆成三部分（当然也可以更多，这里说最简单的），那么我们就需要编写3个组件，其中头部和底部都是可以在整站的很多位置复用的。那我们开始编写我们的组件：
var Header = React.createClass({
render: function() {
return <h1>欢迎来到React学习站</h1>
}
});
var Main = React.createClass({
render: function() {
return (<div className="main_box">
<h2>这是一篇关于学习React的网站</h2>
<div>我是内容，哈哈哈……</div>
</div>
)}
});
var Footer = React.createClass({
render: function() {
return (<div>
<p>联系电话1333333333</p>
<p>QQ：6843521463</p>
</div>
)}
});
var Index = React.createClass({
render: function() {
return (<div>
<Header />
<Main />
<Footer />
</div>
)}
});
ReactDOM.render(
<Index />,
document.getElementById(‘div1‘)
);
这里首先我们使用React.createClass方法定义了3个组件，再在Index组件里将三个组件包在一起，最后添加到DOMrender中。
其中需要注意的是，在render里的代码结构如果是多层，在最外层必须包裹一层标签，否则会报错。
定义的名字一定需要以大写开头。
3.props
prop在当前组件里来传递数据，常见的情况是父级传给子级数据，然后子级来调用。
var ListContent = React.createClass({
render: function(){
return (
<div>
<div>{this.props.json.one}</div>
<div>{this.props.json.two}</div>
</div>
);
}
});
var All = React.createClass({
render: function(){
var json = {
‘one‘: ‘这是一个用react写出来的东西‘,
‘two‘: ‘hello world‘,
};
return (
<div>
<ListContent json={json} />
</div>
);
}
});
ReactDOM.render(
<All />,document.getElementById(‘box‘)
);
这里我们在All中定义了一个数据，然后将它传入ListContent 这个组件里，这个时候ListContent 里就有了json的数据，在里面的内容结构中就可以使用this.props来调用了，需要注意的是，在标签里插入内容需要用{}来包起来。
4.state
React可以算是一个大的状态机，其中的数据改变几乎都来源于状态的改变，state可以用来设置这个状态，当触发某个动作的时候来改变这个state从而更新页面中相关的数据。一个简单的例子：
var ListContent = React.createClass({
getInitialState: function() {
return {
click: true
};
},
ShowName: function() {
this.setState({
click: false
});
alert(‘iceblue‘)
},
render: function() {return (
< div >
< button disabled={this.state.click} onClick = {this.ShowName} > 显示名字 < /button>
< /div >
);
}
});
ReactDOM.render( < ListContent /> , document.getElementById(‘box‘));
在初始环境我们用getInitialState（固定名字）来设定初始的state值，当然也可以不设定。这里我们设定了一个状态click，我们的想法是点击之后按钮变得不可点击。这里我们定义了一个ShowName（自定义）函数来做两件事，显示名字和改变状态，注意，最好在改变状态的函数中不添加其它作用代码，这里为了省事。这个时候当我们触发onClick（固定）事件后调用之前定义的函数，通过setState来改变click的值，这时候组件会接收到这种改变并对页面进行改变。
基本通过props和state就可以完成一些简单的组件化开发了。
5.map
与JQ的map类似，可以遍历子节点然后进行相应的操作，我们可以利用map来减少大量重复的代码，只需要改变其中填充的数据即可。
var number = [‘1‘, ‘2‘, ‘3‘, ‘4‘];
ReactDOM.render(
<div>
{
number.map(function(name,key){
return <div key={key}>这次年终有{name}个月</div>
})
}
</div>,
document.getElementById(‘box‘)
);
6.ref
最开始的时候我们提到了React的最大特点是虚拟DOM，那么也就是说我们所创建的组件其实并不是真实的节点，只有当插入完成后才会变成真实的DOM。当状态改变后，再将算完的结构展现到页面上。如果我们需要获取真实的DOM节点就需要用到ref属性。
var MyComponent = React.createClass({
handleClick: function() {
console.log(this.refs.myTextInput);
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" value="随便写点" />
<input type="button" value="print" onClick={this.handleClick} />
</div>
)}
});
ReactDOM.render(<MyComponent/>,document.getElementById(‘box‘));
//<input type="text" value="随便写点" data-reactid=".0.0" />
这里首先在第一个input中定义ref，之后就能获取到真实节点并进行相应的操作了，其中data-reactid不用管，类似于DOM分层标识，可以让React清楚的知道DOM结构并作出快速的计算。
7.生命周期
所谓生命周期就是在代码运行的不同阶段我们可以进行不同操作，其中大体有这么几种（固定名字）：
getInitialState: 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
componentWillMount: 服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用setState，render() 将会感知到更新后的 state，执行仅一次
componentDidMount: 在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.getDOMNode() 来获取相应 DOM 节点。
还有更多的更新组件方法
componentWillReceiveProps: 在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用
shouldComponentUpdate: 在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用
componentWillUpdate: 在 state 改变的时候执行一些操作
8.事件名
触摸事件：onTouchCancel\onTouchEnd\onTouchMove\onTouchStart
键盘事件：onKeyDown\onKeyPress\onKeyUp
剪切事件：onCopy\onCut\onPaste
表单事件：onChange\onInput\onSubmit
焦点事件：onFocus\onBlur
UI元素：onScroll(移动设备是手指滚动和PC的鼠标滑动)
滚动事件：onWheel(鼠标滚轮)
鼠标类型:onClick\onContextMenu(右键)\onDoubleClick\onMouseDown\onMouseEnter\ onMouseLeave\onMouseMove\onMouseOut\onMouseOver\onMouseUp onDrag\onDrop\onDragEnd\onDragEnter\onDragExit\onDragLeave\onDragOver\onDragStart
9.代码书写的注意事项
样式：
在React中传递数据前面提到过要用{}包起来，同理在标签内传递
class：className={fontColor}或className="class1"
style：style={{color:"red"}}或style={newStyle}，其中newStyle为定义的样式集合{corlor:"red",height:.......}
逻辑：
如果想在React中插入代码，可以在代码块外面写，比如
var MyComponent = React.createClass({
if(...){do something};
render: function() {
return (
<div>1</div>
)}
});
今天就写这些，日后可能会出一些关于webpack或者redux结合react的博客，不过博主很懒，不一定啥时候了= =#，最后附上中文API地址：
http://reactjs.cn/react/docs/getting-started.html
原文：http://www.cnblogs.com/sisterice/p/5513172.html
内容总结
以上是互联网集市为您收集整理的React系列（一）：React入门全部内容，希望文章能够帮你解决React系列（一）：React入门所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。