十、css、jsx、html 拆分开
前面两篇文章的例子，我们将css和jsx都是写在html文件里面的。当然，我们也可以将css、jsx、html分开来，各写一个文件
案例 14
新建三个文件如下
react.html
<!DOCTYPE html> <html> <head> <title>react入门</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./react.css"> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel" src="./react.js"><script> </body> </html>
react.js
var Test = React.createClass({ render:function(){ return ( <div> <p className="box">你好</p> </div> ) } }); ReactDOM.render( <Test />, document.getElementById('example') )
react.css
.box{
background: red;
color: #fff;
}
效果如下所示
当然上面的react.js这个文件，你也可以命名为react.jsx，在html里面引入的时候，也要记得引入react.jsx哦
上面一个案例还有一个小问题，不一定每个人都会遇到
如果你将jsx、css、html分开写，遇到了上图中的报错，你可以观察一下上面两个效果图的url部分的差别，这里遇到了跨域问题（怎么解决大家可以自行百度，下面推荐几种方法）。
当遇到上面报错的时候，你可以下载xmapp、phpstudy（php环境）等等来使用，或者用fekit、gulp（前端工具，不会用这种的，你可以使用前面推荐的两种方式，比较容易上手）等等，不管你用哪种方式都可以（这里就不详细讲解是怎么用的了，大家可以自行百度）。
十一、state
什么是state呢？官网的解释如下：
组件其实是状态机（State Machines）。React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态，可以轻松让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React 来决定如何最高效地更新 DOM。
我自己的理解，state就是react组件内部的一种状态，可以设置初始值，当它发生改变的时候，组件会重新渲染。具体的还是来看例子来说吧。
getInitialState，为组件的初始状态赋值
案例15：
<!DOCTYPE html> <html> <head> <title>react入门</title> <meta charset="utf-8"> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Test = React.createClass({ getInitialState:function(){ return { val:'red' }; }, render:function(){ return ( <div> <input type="text" value={this.state.val} /> </div> ) } }); ReactDOM.render( <Test />, document.getElementById('example') ) </script> </body> </html>
效果如下
分析如下
this.state.xxx获取状态
在这个例子中，你会发现你无法修改input的值，我们可以通过onChange事件来完成这个功能，具体请继续往下看
受控组件，介绍戳这里
非受控组件，介绍戳这里
十二、setState
State 工作原理：常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的callback 回调。大部分情况下不需要提供 callback，因为 React 会负责把界面更新到最新状态。
案例16：
<!DOCTYPE html> <html> <head> <title>react入门</title> <meta charset="utf-8"> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <style type="text/css"> .tab{background:yellow;} </style> </head> <body> <div id="example"></div> <script type="text/babel"> var Test = React.createClass({ getInitialState:function(){ return { val:'red' }; }, changes:function(event){ this.setState({val:event.target.value}) }, render:function(){ return ( <div> <input type="text" value={this.state.val} onChange={this.changes} /> {this.state.val} </div> ) } }); ReactDOM.render( <Test />, document.getElementById('example') ) </script> </body> </html>
效果如下
分析如下
我们可以在console一下event.target，如下所示
结果如下（当删除字母d的时候）
案例17：
<!DOCTYPE html> <html> <head> <title>react入门</title> <meta charset="utf-8"> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Test = React.createClass({ getInitialState:function(){ return { checked:false }; }, changes:function(){ this.setState({checked:!this.state.checked}) }, render:function(){ var txt = this.state.checked==false?'没选中':'选中' return ( <div> <input type="checkbox" checked={this.state.checked} onChange={this.changes} /> {txt} </div> ) } }); ReactDOM.render( <Test />, document.getElementById('example') ) </script> </body> </html>
效果如下
分析如下
!this.state.checked，当this.state.checked的值为false的时候，通过this.setState将checked的值改为true。当this.state.checked的值为true的时候，通过this.setState将checked的值改为false
十三、refs
在react里面，也会遇到一些需要进行dom操作的时候。
案例18：
<!DOCTYPE html> <html> <head> <title>react入门</title> <meta charset="utf-8"> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Test = React.createClass({ clicks:function(){ console.log(this.refs.inputVal) console.log(this.refs.inputVal.value) }, render:function(){ return ( <div> <input ref="inputVal" type="text" /> <button onClick={this.clicks}>点击</button> </div> ) } }); ReactDOM.render( <Test />, document.getElementById('example') ) </script> </body> </html>
效果如下
分析如下
如图所示，我们给input添加了一个属性ref，这个就相当于是我们给input的取了一个名
button写了点击事件onClick，在点击button的时候，调用clicks方法
如上图所示，在clicks方法里面，打印this.refs.inputVal的结果如下所示
this.refs.inputVal也就相当于是获取了input这个元素
this.refs.inputVal.value也就是获取了input这个元素的value值
对于refs这一部分总结一下
我们需要从组件里获取DOM节点的时候，就需要用到ref属性（在标签上添加属性ref="refName"）
然后通过this.refs.refName返回DOM节点