Reactjs快速上手
React简述
React是由fackbook开放的一个构建用户接口的javascript类库,其主要目的是为了开发随时间数据不断变化的大型应用程序,许多开发者将React视作为MVC模式中的V.2011年React开始被fackbook工程师着手开发,并作为内部使用,2013年正式开源,学习react需要掌握一定的JavaScript基础。
React的优势
交互式开发 ：当有数据发生变化时，界面会发生相应的变化.
组件为开发单元：React是由组件作为开发单元的,一个组件可以包含一个或多个其他组件.
可以在多个平台中使用: React除了可以在webapp中使用,还可以借助React Native将其应用到IOS和Android应用程序.
开发前的准备
开发React程序需要引入必要的文件,下面是一个React程序的基本构架:
React这里我们引入了三个文件,这几个文件我都是通过bower进行安装的,首先是react.js,这个主要包含了React的相关方法的定义.react-dom.js是将我们定义的组件插入到html文档中.browser.min.js这个文件的作用是将具有JSX语法的代码转换为JavaScript代码,假如我们使用的是JavaScript编写代码则这个文件可以不引用.当然你可以先使用JSX编写，然后通过react-tools进行离线转换.
一个小Demo
这里先给大家列出一个小的例子,让大家先尝尝鲜.
Search Demo div{text-align: center;font:normal 20px/50px microsoft yahei;} input{width:80%;border-radius: 4px;border:solid;text-align: center;height: 30px;}var SearchInput = React.createClass({ handerChange: function(){ this.props.setName(this.refs.seachbox.value); }, render: function(){ return ( ); }});var List = React.createClass({ render:function(){ var lists = this.props.lists; var filterWord = this.props.filterWord; var rows = []; lists.forEach(function(list){ if(list.toLowerCase().indexOf(filterWord.toLowerCase())!=-1){ rows.push({list}); } }.bind(this)); return ( {rows} ); }}); var SearchBox = React.createClass({ getInitialState: function(){ return { filterWord:'' }; }, setName: function(filterWord){ this.setState({filterWord:filterWord}); }, render: function(){ return ( ); }});var lists = ['Jack','Wason','Marray','Lucy','Jummy','Herry','Bob'];ReactDOM.render(,document.getElementById('container')); 这是一个简单的搜索功能的实现,以上代码可以直接放在html文件中运行.这里我们一共定义了三个组件,分别是SearchInput List SearchBox,这里有一点需要提示大家:组件名的首字母必须大写.SearchInput和 List作为SearchBox的子组件,我们创建组件是使用的React.createClass方法,并通过ReactDOM.render将组件添加到html文档中.
这里面还有两个比较特殊的值this.props和this.state.这两个的区别在于this.props在载入后不会发生改变,而this.state可以通过被设置从而导致相应的变化.
React API
React API定义了两个对象React和ReactDOM.
React对象
React.Component
React.Component是在ES6语法下定义组件使用到的，如下:
class HelloMessage extends React.Component {
render() {
return Hello {this.props.name};
}
}
React.createClass
React.createClass方法也是用于定义一个组件,其参数为一个对象，这个对象必须包含render方法,render方法返回一个元素,例如div.这个元素下可以包含任意个html标签或者React组件.
var Component = React.createClass({ render:function(){ return ( Hello World!!! ); });传入这个方法的对象中可以自定义属性,当然还有一些具有特殊意义的属性,具体如下:
render
getInitialState
getDefaultProps
getDefaultProps
propTypes
mixins
statics
displayName
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
React.createElement
React.cloneElement
React.createFactory
React.isValidElement
React.DOM
React.PropTypes
React.Children
ReactDOM对象
ReactDOM.render
ReactDOM.unmountComponentAtNode
ReactDOM.findDOMNode
火速更新中。。。。
关键字：react.js, JavaScript, React, 组件
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！