ReactJs入门

对ReactJs的认知一、ReactJS原理与组件化React引入虚拟DOM的机制：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。React组件的特性：可重用性、可组合性、可维护性。二、ReactJs使用•React不需要安装，直接到官网下载ReactJs即可。一个完整使用例子：!DOCTYPEhtmlhtmlheadmetacharset=UTF-8/titleHelloReact!/titlescriptsrc====example/divscripttype=text/babelReactDOM.render(h1Hello,world!/h1,document.getElementById('example'));/script/body/html•react.js、react-dom.js和Browser.js这三个库需先加载•react.js是React的核心库，react-dom.js是提供与DOM相关的功能，Browser.js的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，应该将它放到服务器完成。•凡是使用JSX的地方，都要加上type=text/babel，JSX遇开头用html规则解析，遇到{用Javascript规则解析。模板转为html语言并插入DOM节点ReactDOM.render(h1Hello,world!/h1,document.getElementById('example'));varnames=['alice','emily','kate'];ReactDOM.render(div{names.map(function(name){returndivHello,{name}!/div})}/div,document.getElementById('example'));2.1HelloWorld例子!DOCTYPEhtmlhtmlheadscriptsrc=../build/react.js/scriptscriptsrc=../build/react-dom.js/scriptscriptsrc=../build/browser.min.js/script/headbodydivid=example/divscripttype=text/babelReactDOM.render(h1Hello,world!/h1,document.getElementById('example'));/script/body/html2.2ReactJS组件•创建组件React允许将代码封装成组件，然后像插入普通HTML标签一样，在网页中插入这个组件。React.createClass方法就用于生成一个组件类。①组件类首字母必须大写②组件类只能够包含一个顶层标签③组件类必须有自己的render方法，用于输出组件④组件属性用this.props获取（注：class要变为className,for变为htmlFor）⑤自定义属性用data-为前缀varHelloWorld=React.createClass({render:function(){returnh1Hello{this.props.name}/h1;}});ReactDOM.render(HelloWorldname=JoinclassName=helloworld/,document.getElementById('example'));•复合组件varWebSite=React.createClass({render:function(){return(divNamename={this.props.name}/Linksite={this.props.site}//div);}});varName=React.createClass({render:function(){return(h1{this.props.name}/h1);}});varLink=React.createClass({render:function(){return(ahref={this.props.site}{this.props.site}/a);}});React.render(WebSitename=hellosite=('example'));创建多个组件来合成一个组件，即把组件的不同功能点进行分离•组件statestate通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。只需更新组件的state，然后根据新的state重新渲染用户界面就可以达到与用户交互的目的。varLikeButton=React.createClass({getInitialState:function(){return{liked:false};},handleClick:function(event){this.setState({liked:!this.state.liked});},render:function(){vartext=this.state.liked?'喜欢':'不喜欢';return(ponClick={this.handleClick}你b{text}/b我。点我切换状态。/p);}});React.render(LikeButton/,document.getElementById('example'));getInitialState方法用于定义初始状态。通过this.state属性读取。当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。•组件propsstate和props主要的区别在于props是不可变的，而state可以根据与用户交互来改变。有些容器组件需要定义state来更新和修改数据,而子组件只能通过props来传递数据。varHelloMessage=React.createClass({render:function(){returnh1Hello{this.props.name}/h1;}});ReactDOM.render(HelloMessagename=Runoob/,document.getElementById('example'));使用propsvarHelloMessage=React.createClass({getDefaultProps:function(){return{name:'Runoob'};},render:function(){returnh1Hello{this.props.name}/h1;}});ReactDOM.render(HelloMessage/,document.getElementById('example'));使用statevarWebSite=React.createClass({getInitialState:function(){return{name:测试,site:};},render:function(){return(divNamename={this.state.name}/Linksite={this.state.site}//div);}});React.render(WebSite/,document.getElementById('example'));混合使用state跟propsvarName=React.createClass({render:function(){return(h1{this.props.name}/h1);}});varLink=React.createClass({render:function(){return(ahref={this.props.site}{this.props.site}/a);}});•组件设置默认值及验证varMytitle=React.crateClass({propTypes:{title:React.propTypes.String.isRequired},//此可验证属性值是否符合要求getDefaultProps:function(){return{title:'helloworld'};//设置组件默认值},render:function(){returnh1{this.props.title}/h1;}});Props验证使用propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes提供很多验证器(validator)来验证传入数据是否有效。当向props传入无效数据时，JavaScript控制台会抛出警告。•更多验证器React.createClass({propTypes:{//可以声明prop为指定的JS基本数据类型，默认情况，这些数据是可选的optionalArray:React.PropTypes.array,optionalBool:React.PropTypes.bool,optionalFunc:React.PropTypes.func,optionalNumber:React.PropTypes.number,optionalObject:React.PropTypes.object,optionalString:React.PropTypes.string,optionalNode:React.PropTypes.node,//可以被渲染的对象numbers,strings,elements或arrayoptionalElement:React.PropTypes.element,//React元素optionalMessage:React.PropTypes.instanceOf(Message),//用JS的instanceof操作符声明prop为类的实例。optionalEnum:React.PropTypes.oneOf(['News','Photos']),//用enum来限制prop只接受指定的值。optionalUnion:React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number,React.PropTypes.instanceOf(Message