React入门实例学习
React可以在浏览器运行,也可以在服务器运行,但是在这为了尽量保持简单,且React语法是一致的,服务器的用法和浏览器差别不大,在这只涉及浏览器。
一. HTML模板
使用React的网页源码,结构大致如下:
<!DOCTYPE html> <html > <head> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <div id="example" ></div> <script type="text/jsx"> //Our code goes here! </script> </body> </html>
注意:
1.最后一个script标签的type属性为text/jsx。这是因为React独有的JSX语法,跟JavaScript不兼容。凡是使用JSX的地方,都要加上type=”text/jsx”。
2.React提供两个库:react.js和JSXTransformer.js,它们必须首先加载,其中JSXTransformer.js的作用是将JSX语法转为JavaScript语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。
$ jsx src/ build/:这个命令可以将src子目录的js文件进行语法转换,转码后的文件全部放在build子目录。
二. React.render()
React.render是React的最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点。
实例一:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <div id="example" ></div> <script type="text/jsx"> React.render( <h1>Hello,World</h1>, document.getElementById("example") ); </script> </body> </html>
运行效果:
三. JSX语法
HTML语言直接写在JavaScript语言之中,不加任何引号,这就是JSX的语法,它允许HTML与JavaScript的混写。
实例二:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <div id="example" ></div> <script type="text/jsx"> var names = ['Alice','Emily','Kate']; React.render( <div> { names.map(function(name) { return <div>Hello,{name}!</div> }) } </div>, document.getElementById("example") ); </script> </body> </html>
运行效果:
上面代码体现了JSX的基本语法规则:遇到HTML标签(以<开头),就用HTML规则解析;遇到代码块(以{开头},就用JavaScript规则解析。
JSX允许直接在模板插入JavaScript变量。如果这个变量是一个数组,则会展开这个数组的所有成员
实例三:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <div id="example" ></div> <script type="text/jsx"> var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2> ]; React.render( <div>{arr}</div>, document.getElementById("example") ); </script> </body> </html>
上面代码的arr变量是一个数组,结果JSX会把它的所有成员,添加到模板,运行结果如下:
四. 组件
React允许将代码封装成组件(component),然后像插入普通HTML标签一样,在网页中插入这个组件。React.createClass方法就用于生成一个组件类。
实例四:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <div id="example" ></div> <script type="text/jsx"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); React.render( <HelloMessage name="John"/>, document.getElementById("example") ); </script> </body> </html>
运行效果:
上面代码中,变量HelloMessage就是一个组件类。模板插入<HelloMessage/>时,会自动生成HelloMessage的一个实例(下文的“组件”都指组件类的实例)。所有组件类都必须有自已的render方法,用于输出组件。
组件的用法与原生的HTML标签完全一致,可以任意加入属性,比如<HelloMessage name=”John”/>,就是HelloMessage组件加入一个name属性,值为John。组件的属性可以在组件类的this.props对象上获取,比如name属性就可以通过this.props.name读取。
添加组件属性,有一个地方需要注意,就是class属性需要写成className,for属性需要写成htmlFor,这是因为class和for是JavaScript的保留字。
五. this.props.children
this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性。它表示组件的所有子节点。
实例五:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <script type="text/jsx"> var NotesList = React.createClass({ render:function() { return ( <ol> { this.props.children.map(function(child) { return <li>{child}</li> }) } </ol> ); } }); React.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body ); </script> </body> </html>
上面代码的NoteList组件有两个span子节点,它们都可以通过this.props.children读取,运行结果如下:
这里需要注意,只有当子节点多于1个时,this.props.children才是一个数组,否则是不能用map方法的,会报错。
六. React.findDOMNode()
组件并不是真实的DOM节点,而是存在于内存之中的一种数据结构,叫做虚拟DOM(virtual DOM)。只有当它插入文档之后,才会变成真实的DOM。根据React的设计,所有的DOM变动,都先在虚拟DOM上发生,然后再将实际发生变动的部分,反映在真实DOM上,这种算法叫做DOM diff,它可以极大提高网页的性能。
但是,有时需要从组件获取真实DOM的节点,这时就要用到React.findDOMNode方法。
实例六:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <div id="example" ></div> <script type="text/jsx"> var MyComponent = React.createClass({ handleClick: function() { React.findDOMNode(this.refs.myTextInput).focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput"/> <input type="button" value="Focus the text input" onClick={this.handleClick}/> </div> ); } }); React.render( <MyComponent/>, document.getElementById('example') ); </script> </body> </html>
运行效果:
上面代码中,组件MyComponent的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的DOM节点,虚拟DOM是拿不到用户输入的。为了做到这一点,文本输入框必须有一个ref属性,然后this.refs.[refName]就指向这个虚拟DOM的子节点,最后通过React.findDOMNode方法获取真实DOM的节点。
需要注意的是,由于React.findDOMNode方法获取的是真实DOM,所以必须等到虚拟DOM插入文档以后,才能使用这个方法,否则会返回null。上面代码中,通过为组件指定Click事件的回调函数,确保了只有等到真实DOM发生Click事件之后,才会调用React.findDOMNode方法。
React组件支持很多事件,除了Click事件以外,还有KeyDown、Copy、Scroll等,完整的事件清单请查看官方文档。
七. this.state
组件免不子要与用户互动,React的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染UI,如下实例所示。
实例七:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <div id="example" ></div> <script type="text/jsx"> 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> ); } }); React.render( <LikeButton/>, document.getElementById('example') ); </script> </body> </html>
运行效果:
点击上面这行,将会变成如下内容
再次点击,会变回初始内容,即点击内容会交替变换。
上面代码是一个LikeButton组件,它的getInitialState方法用于定义初始状态,也就是一个对象,这个对象可以通过this.state属性读取。当用户点击组件,导致状态变化,this.setState方法就修改状态值,每次修改以后,自动调用this.render方法,再次渲染组件。
由于this.props和this.state都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props表示那些一旦定义,就不再改变的特性,而this.state是会随着用户互动而产生变化的特性。
八. 表单
用户在表单填入的内容,属于用户跟组件的互动,所以不能用this.props读取。如下实例所示。
实例八:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <script type="text/jsx"> 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> ); } }); React.render( <Input/>, document.body ); </script> </body> </html>
运行效果:
上面代码中,文本输入框的值,不能用this.props.value读取,而要定义一个onChange事件的回调函数,通过event.target.value读取用户输入的值。textarea元素、select元素、radio元素都属于这种情况,更多介绍请参考官方文档。
九. 组件的生命周期
组件的生命周期分成三个状态:
Mounting:已插入真实DOM
Updating:正在被重新渲染
Unmounting:已移出真实DOM
React为每个状态都提供了两种处理函数,will函数在进入状态之前调用,did函数在进入状态之后调用,三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外,React还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
这些方法的详细说明,可以参考官方文档。
实例九:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <script type="text/jsx"> var Hello = React.createClass({ getInitialState: function() { return { opacity: 1.0 }; }, componentDidMount: function() { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function() { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } }); React.render( <Hello name="world"/>, document.body ); </script> </body> </html>
运行效果:
上面代码在hello组件加载以后,通过componentDidMount方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。
另外,组件的style属性的设置方式也值得注意,不能写成
style=”opacity:{this.state.opacity};”
而要写成
style={{opacity:this.state.opacity}}
这是因为React组件样式是一个对象,所以第一重大括号表示这是JavaScript语法,第二重大括号表示样式对象。
十. Ajax
组件的数据来源,通常是通过Ajax请求从服务器获取,可以使用componentDidMount方法重新渲染UI。
实例十:
<!DOCTYPE html> <html > <head> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="console-polyfill.js"></script> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head> <body> <script type="text/jsx"> 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> ); } }); React.render( <UserGist source="https://api.github.com/users/octocat/gists"/>, document.body ); </script> </body> </html>
上面代码使用jQuery完成Ajax请求,这是为了便于说明。React没有任何依赖,完全可以使用其他库。
-
本文附件下载:
- React_Study.rar (6.8 MB)
已有 0 人发表留言,猛击->> 这里<<-参与讨论
ITeye推荐