<div class="article fmt article__content">
<p>react众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两。本文就带大家一起掌握react。</p>
<h1>jsx语法</h1>
<p>前端MVVM主流框架都有一套自己的模板处理方法，react则使用它独特的jsx语法。在组件中插入html类似的语法，简化创建view的流程。</p>
<p>下面让我们来认识一下构建的两种元素</p>
<h2>原生元素</h2>
<pre class="blockcode"><code>ReactDOM.render((
<div>
<h1>标题</h1>
</div>
), document.getElementById('root'))</code></pre>
<p>通过简单的语法页面就会被插入一个div+一个h1标签。原生的html元素可以被直接使用。以上的语法并不是js支持的语法，需要被转换之后才能运行。</p>
<h2>自定义元素</h2>
<p>react强大之处就在于可以组件的自定义，实现组件的复用。如果我们创建了一个组件。我们也可以通过jsx语法调用。</p>
<pre class="blockcode"><code>import * as React from 'react'
class Page extends React.Component {
render() {
return (<div>
home111 &copy; \ua9
</div>)
}
}
ReactDOM.render((
<div>
<Page/>
</div>
), document.getElementById('root'))</code></pre>
<p>我们定义了一个Page组件，可以在jsx里面像调用html一样直接调用。</p>
<h2>插入动态数据</h2>
<pre class="blockcode"><code>let name = 'hi'
ReactDOM.render((
<div>
{name}
</div>
), document.getElementById('root'))</code></pre>
<p>使用{}就可以插入数据，但是{}中间的必须是js表达式，不能是语句。如果表达式的执行结果是一个数组，则会自动join。</p>
<h2>注释</h2>
<p>jsx语法和html语法一样，也是可以插入注释，只不过写的时候有一些区别</p>
<h3>子组件注释</h3>
<pre class="blockcode"><code>let name = 'hi'
ReactDOM.render((
<div>
{/* 注释 */}
{name}
</div>
), document.getElementById('root'))</code></pre>
<p>在子组件中插入注释，需要使用{}包裹起来，在/<em> </em>/之间插入注释文字。</p>
<h3>属性注释</h3>
<pre class="blockcode"><code>let name = 'hi'
ReactDOM.render((
<div>
{name}
<img /*
多行注释
*/ src="1.jpg"/>
</div>
), document.getElementById('root'))</code></pre>
<p>在标签中间，可以插入一个多行注释，类似上面的代码。</p>
<h2>属性props</h2>
<ol><li>可以向使用html的attr一样使用属性，就像下面img的src一样</li></ol>
<pre class="blockcode"><code>let name = 'hi'
ReactDOM.render((
<div>
<img src="1.png"/>
</div>
), document.getElementById('root'))</code></pre>
<ol><li>如果需要传递动态属性，使用{}，多个属性，使用展开运算符</li></ol>
<pre class="blockcode"><code>let props = {
src: '1.png',
alt: '1图片'
}
ReactDOM.render((
<div>
<img src={"1.png"}/>
<img {...props}/>
</div>
), document.getElementById('root'))</code></pre>
<ol><li>两个转换,class-->className for-->htmlFor</li></ol>
<p>因为class和for是javascript关键字，所以这里需要用转换之后名称</p>
<pre class="blockcode"><code>ReactDOM.render((
<div className="tab">
<label htmlFor="name">姓名:</label><input id="name"/>
</div>
), document.getElementById('root'))</code></pre>
<ol><li>布尔属性</li></ol>
<p>如果一个属性的值是布尔值，当这个值是true的时候则可以省略=后面的值，只保留key。</p>
<pre class="blockcode"><code>ReactDOM.render((
<div className="tab">
<input type="text" required/>
<input type="text" required={true}/>
</div>
), document.getElementById('root'))</code></pre>
<ol><li>原生元素的自定义属性</li></ol>
<p>react对元素属性做了校验，如果在原生属性上使用此元素不支持的属性，则不能编译成功。必须使用data-前缀</p>
<pre class="blockcode"><code>ReactDOM.render((
<div className="tab">
<input type="text" data-init="22"/>
</div>
), document.getElementById('root'))</code></pre>
<h2>插入html</h2>
<p>如果动态的插入html元素,react出于安全性考虑会自动帮我们转义。所以一定要动态的插入元素的话，使用dangerouslySetInnerHTML</p>
<pre class="blockcode"><code>ReactDOM.render((
<div className="tab">
<div dangerouslySetInnerHTML={<!-- -->{__html: '<span>test</span>'}}></div>
</div>
), document.getElementById('root'))</code></pre>
<h1>React组件创建</h1>
<h2>React.createClass</h2>
<p>这是旧版本的api，使用React.createClass创建组件，配套的一些api， |
|
转播
