十、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>