React 组件实例在渲染的时候创建。这些实例在接下来的渲染中被重复使用,可以在组件方法中通过this访问。唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存React.render的返回值。在其它组件内,可以使用refs得到相同的结果(后面会简单解释refs)。
从上几章的学习,我们可以这么理解组件,学过PHP的Yii框架的都知道widget组件,react.js定义一个组件,通过在组件中定义各种'方法',‘属性’最后通过render来渲染这个组件。
其中<组建名称 /> 这种形式的调用,类似Yii框架中的$this->widget()来生成视图。
下面来说一下组件的状态:
index.html
<html> <head> <Metacharset="utf-8"> </head> <body> <divid="app_react"></div> <scriptsrc="build/react.js"></script> <scriptsrc="build/JSXTransformer.js"></script> <!--此处把react部分的js独立出来了--> <scripttype="text/jsx"src="index.js"charset="utf-8"></script> </body> </html>
index.js
varMessageBox=React.createClass({ getInitialState:function(){//此方法是内置方法 return{ titles:"碉堡的title!",names:'蛋疼的名字',contents:'asdfghjklzxcvbnmqwertyuiop',} },changeState:function(){ vars=Math.floor(Math.random()*20) vare=Math.floor(Math.random()*20) this.setState({ names:this.state.names+this.state.contents.substr(s,e) }); },render:function(){ return( <div> <h1>ThisisReact.JS</h1> <ShowBox/> <p><inputtype="button"onClick={this.changeState}value="尽情的点我"/></p> <p>{this.state.titles}</p> <p>{this.state.names}</p> </div> ); } }); varShowBox=React.createClass({ alertX:function(){ alert('弹弹弹死你们!'); },render:function(){ varstyleOptions={ width:'1000px',height:'100px',background:'#789798' }; return( <divstyle={styleOptions}> </div> ); } }); varReactObj=React.render( <MessageBox/>,document.getElementById('app_react'),function(){ console.log("渲染成功!") } );
讲解:
至于ShowBox组件,就不用多说了,
我们来看看MessageBox组件,getInitialState是React内置的方法,调用的方式是:
{this.state.names}
可以把this.state当做不可变的(只读的),因为在之后调用setState()可能会替换掉你做的更改,
如果强制修改,可以用React对象调用forceUpdate()的方法更新更改。
在React render渲染完成后,会返回一个React对象,这个对象会含有所有属性,方法。
众所周知,react.js会渲染整个DOM来更新变化,那么React.js是如何快速高效地执行的呢?
React是很快的,因为它从不直接操作DOM。React在内存中维护一个快速响应的DOM描述。render()方法返回一个DOM的描述,React能够利用内存中的描述来快速地计算出差异,然后更新浏览器中的DOM。
DOM的挂载:
是什么是挂载? 及React组件被渲染到DOM中,只有组件被渲染才可以调用getDOMNode() 方法来获取 本组件渲染后生成的DOM(及可称作 DOM对象), 来修改元素的一些属性。
如果在无渲染组件的时候, 获取一个组件的引用 , 该怎么做?
(类似Yii中 在组件活小部件中 怎么获取当前controller一样)
你可以使用this来得到当前的React组件,或者你可以使用refs来指向一个你拥有的组件
详细件代码:
focusInput:function(){ varrefsNode=this.refs.test_ref.getDOMNode(); refsNode.focus(); refsNode.title="90design"; },render:function(){ return( <div> <p><inputtype="text"ref="test_ref"value="测试refs"/></p><!--试试可以修改input的值吗!--> <p><inputtype="button"onClick={this.focusInput}value="点击测试refs"/></p> </div> ); }
写的不够详尽,有待改善,请大牛指点一二。
The End!