脚本宝典收集整理的这篇文章主要介绍了

React技术栈——ReactJS

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">初始化</h2> <p>引入三个script:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;build/react.js&quot;></script><br /> <script src=&quot;build/react-dom.js&quot;></script><br /> <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"build/react.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"build/react-dom.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-core/5.8.34/browser.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>第一个是<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>的核心代码,第二react-dom.js是<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>里面操作<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>的部分,第三个browser.js将<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>转为Javascript语法。</p> <h2 id="articleHeader1"><a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render</h2> <p>将模板语言转为<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>语言,并插入<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="ReactDOM.render( <div>Test</div> <p>,<br /> document.body<br /> );<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span>Test<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>, <span class="hljs-built_in">document</span>.body ); </code></pre> <h2 id="articleHeader2">组件</h2> <p>组件类第一个字母必须大写</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var Hello = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({<br /> render: function(){<br /> return </p> <h1>Hello ,{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.name}</h1> <p> }<br /> })</p> <p>ReactDOM.render(<br /> <Hello name=&quot;cxs&quot; ></Hello>,<br /> document.body<br /> )<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> Hello = React.create<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>({ <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello ,{<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.props.name}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span> } }) ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Hello</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cxs"</span> /&gt;</span>, document.body ) </span></code></pre> <h2 id="articleHeader3"><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.children</h2> <p>this.props对象属性与组件属性一一对应。this.props.children是例外,它表示组件的所有节点</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var NotesList = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({<br /> render: function(){<br /> return (</p> <ol> {<br /> React.children.map(this.props.children, function(child){<br /> return </p> <li>{child}</li> <p> })<br /> } </ol> <p> );<br /> }<br /> });</p> <p>ReactDOM.render(<br /> <NotesList><br /> <span>Hello</span><br /> <span>world</span><br /> </NotesList>,<br /> document.body<br /> );</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> NotesList = React.createClass({ <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span> { React.children.map(this.props.children, function(child){ return <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>{child}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> }) } <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span></span> ); } }); ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">NotesList</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Hello<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>world<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">NotesList</span>&gt;</span></span>, <span class="hljs-built_in">document</span>.body ); </code></pre> <h2 id="articleHeader4"><a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>Types</h2> <p>组件的属性可以接受任意值。需要一种验证机制,验证别人使用组件时提供的参数是否合法</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var Title = React.createClass({ propTypes: { title: React.propTypes.string.isRequired, }, render: function(){ return <h1>{this.props.title}</h1> <p> }<br /> });<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> Title = React.createClass({ <span class="hljs-attr">propTypes</span>: { <span class="hljs-attr">title</span>: React.propTypes.string.isRequired, }, <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{this.props.title}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span> } }); </code></pre> <h2 id="articleHeader5">获取真实DOM节点</h2> <p>组件的是virtual DOM。需要获取真实DOM节点时,要用到ref属性</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var Component = React.createClass({ handleClick: function(){ this.refs.myTextInput.focus(); }, render: function(){ return ( <div> <input type=&quot;text&quot; ref=&quot;myTextInput&quot; /><br /> <input type=&quot;button&quot; value=&quot;Focus the text input&quot; onClick={this.handleClick}> </div> <p> )<br /> }<br /> })</p> <p>ReactDOM.render(<br /> <Component ></Component>,<br /> document.body<br /> )<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>var Component = React.createClass({ handleClick: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ this.refs.myTextInput.focus(); }, render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span> ( &lt;div&gt; &lt;<span class="hljs-built_in">input</span> <span class="hljs-built_in">type</span>=<span class="hljs-string">"text"</span> ref=<span class="hljs-string">"myTextInput"</span> /&gt; &lt;<span class="hljs-built_in">input</span> <span class="hljs-built_in">type</span>=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"Focus the text input"</span> onClick={this.handleClick}&gt; &lt;/div&gt; ) } }) ReactDOM.render( &lt;Component /&gt;, document.body ) </code></pre> <h2 id="articleHeader6">this.state</h2> <p>React的状态机,状态的变化可以出发重新渲染UI</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var LikeButton = React.createClass({ getInitial<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>: function(){<br /> return {liked: false};<br /> },<br /> handleClick: funtion(event){<br /> this.<a href="http://www.js-code.com/tag/setstate" title="setState" target="_blank">setState</a>({liked: !this.state.liked});<br /> },<br /> render: function(){<br /> var text = this.state.liked ? 'like' : 'dont like';<br /> return(</p> <p onclick={this.handleClick}> <p> )<br /> }<br /> })</p> <p>ReactDOM.render(<br /> <LikeButton ></LikeButton>,<br /> document.body<br /> )<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> LikeButton = React.createClass({ <span class="hljs-attr">getInitial<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a></span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">return</span> {<span class="hljs-attr">liked</span>: <span class="hljs-literal">false</span>}; }, <span class="hljs-attr">handleClick</span>: funtion(event){ <span class="hljs-keyword">this</span>.<a href="http://www.js-code.com/tag/setstate" title="浏览关于“setState”的文章" target="_blank" class="tag_link">setState</a>({<span class="hljs-attr">liked</span>: !<span class="hljs-keyword">this</span>.state.liked}); }, <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">var</span> text = <span class="hljs-keyword">this</span>.state.liked ? <span class="hljs-string">'like'</span> : <span class="hljs-string">'dont like'</span>; <span class="hljs-keyword">return</span>( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">{this.handleClick}</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span> ) } }) ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">LikeButton</span> /&gt;</span>, document.body ) </span></code></pre> <h2 id="articleHeader7">组件的生命周期</h2> <p>组件的生命周期有三个状态:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Mounting: 已插入真实DOM Updating: 正在被重新渲染 Unmounting: 已移出真实DOM " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">Mounting:</span> 已插入真实DOM <span class="hljs-string">Updating:</span> 正在被重新渲染 <span class="hljs-string">Unmounting:</span> 已移出真实DOM </code></pre> <p>React为每个状态提供两种处理函数,will在进入状态前调用,did函数在进入状态后调用,共五中处理函数:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" componentWillMount() componentDidMount() componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object preState) componentWillUnount() " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code> <a href="http://www.js-code.com/tag/componentwillmount" title="浏览关于“componentWillMount”的文章" target="_blank" class="tag_link">componentWillMount</a>() componentDidMount() componentWillUpdate(<span class="hljs-name">object</span> next<a href="http://www.js-code.com/tag/prop" title="浏览关于“Prop”的文章" target="_blank" class="tag_link">Prop</a>s, object nextState) componentDidUpdate(<span class="hljs-name">object</span> prevProps, object preState) componentWillUnount() </code></pre> <p>还有两种特殊状态的处理函数:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="componentWillReceiveProps(object nextProps): 已加载组件收到新的参数时调用 shouldComponentUpdate(object nextProps, object nextState): 组件判断是否重新渲染时调用 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>componentWillReceiveProps(<span class="hljs-class"><span class="hljs-keyword">object</span> <span class="hljs-title">nextProps</span>)</span>: 已加载组件收到新的参数时调用 shouldComponentUpdate(<span class="hljs-class"><span class="hljs-keyword">object</span> <span class="hljs-title">nextProps</span>, <span class="hljs-title">object</span> <span class="hljs-title">nextState</span>)</span>: 组件判断是否重新渲染时调用 </code></pre> <p>Demo:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" var Hello = React.createClass({ getInitial<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>: function(){<br /> return {<br /> opacity: 1.0<br /> }<br /> },</p> <p> componentDidMount: function(){<br /> this.timer = setInterval(function(){<br /> var opacity = this.state.opacity;<br /> opacity += 0.05;<br /> if(opacity < 0.1){ opacity = 1.0; } this.<a href="http://www.js-code.com/tag/setstate" title="setState" target="_blank">setState</a>({<br /> opacity: opacity<br /> })<br /> }.bind(this), 100)<br /> },</p> <p> render: function(){<br /> return (</p> <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> <p> )<br /> }<br /> });</p> <p>ReactDOM.render(<br /> <Hello name=&quot;world&quot; ></Hello>,<br /> document.body<br /> )<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code> <span class="hljs-keyword">var</span> Hello = React.createClass({ <span class="hljs-attr">getInitialState</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">return</span> { <span class="hljs-attr">opacity</span>: <span class="hljs-number">1.0</span> } }, <span class="hljs-attr">componentDidMount</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">this</span>.timer = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">var</span> opacity = <span class="hljs-keyword">this</span>.state.opacity; opacity += <span class="hljs-number">0.05</span>; <span class="hljs-keyword">if</span>(opacity &lt; <span class="hljs-number">0.1</span>){ opacity = <span class="hljs-number">1.0</span>; } <span class="hljs-keyword">this</span>.setState({ <span class="hljs-attr">opacity</span>: opacity }) }.bind(<span class="hljs-keyword">this</span>), <span class="hljs-number">100</span>) }, <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{opacity:</span> <span class="hljs-attr">this.state.opacity</span>}}&gt;</span> Hello {this.props.name} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ) } }); ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Hello</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"world"</span> /&gt;</span>, document.body ) </span></code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

React技术栈——ReactJS

全部内容,希望文章能够帮你解决

React技术栈——ReactJS

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过