react入门（3）

时间：2022-09-18 03:13:32

点击查看react入门（1）

点击查看react入门（2）

十、css、jsx、html 拆分开

前面两篇文章的例子，我们将css和jsx都是写在html文件里面的。当然，我们也可以将css、jsx、html分开来，各写一个文件

案例 14

新建三个文件如下

react入门（3）

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入门（3）

当然上面的react.js这个文件，你也可以命名为react.jsx，在html里面引入的时候，也要记得引入react.jsx哦

上面一个案例还有一个小问题，不一定每个人都会遇到

react入门（3）

如果你将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>

效果如下

react入门（3）

分析如下

react入门（3）

react入门（3）

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>

效果如下

react入门（3）

分析如下

react入门（3）

react入门（3）

react入门（3）

我们可以在console一下event.target，如下所示

react入门（3）

结果如下（当删除字母d的时候）

react入门（3）

案例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>

效果如下

react入门（3）

分析如下

react入门（3）

react入门（3）

react入门（3）

!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>

效果如下

react入门（3）

分析如下

react入门（3）

如图所示，我们给input添加了一个属性ref，这个就相当于是我们给input的取了一个名

button写了点击事件onClick，在点击button的时候，调用clicks方法

react入门（3）

如上图所示，在clicks方法里面，打印this.refs.inputVal的结果如下所示

react入门（3）

this.refs.inputVal也就相当于是获取了input这个元素

this.refs.inputVal.value也就是获取了input这个元素的value值

对于refs这一部分总结一下

我们需要从组件里获取DOM节点的时候，就需要用到ref属性（在标签上添加属性ref="refName"）

然后通过this.refs.refName返回DOM节点

react入门（3）的更多相关文章

  1. react入门（1）

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  2. react入门（2）

    接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...

  3. react入门（4）

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  4. React 入门实例教程&lpar;转载&rpar;

    本人转载自: React 入门实例教程

  5. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  6. React入门 &lpar;1&rpar;—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  7. React入门简单实践

    参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> &lt ...

  8. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  9. React入门资源整理

    另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...

随机推荐

  1. &lbrack; jquery 过滤器 hasClass&lpar;class&rpar; &rsqb; 此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类，如果有，则返回true

    此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类,如果有,则返回true 实例: <!DOCTYPE html> <html lang='zh-cn'> < ...

  2. 《C与指针》第九章练习

    本章问题 1.C语言缺少显示的字符串数据类型,这是一个优点还是一个缺点? answer: (这个问题存在争论(尽管我有一个结论))目前这个方法的优点是字符数组的效率和访问的灵活性,它的缺点是有可能引起 ...

  3. 十六进制字节 &amp&semi; 十六进制转二进制

    做项目也将近一年的时间了.从一开始就经常提到“一个十六进制字节”,然而一开始就是迷惑的,直到现在.     一个十六进制字节,比如:FF.周围的人经常说这是一个十六进制字节.然后我就想,这不是两个字符 ...

  4. Qt 学习之路：文件

    文件操作是应用程序必不可少的部分.Qt 作为一个通用开发库,提供了跨平台的文件操作能力.从本章开始,我们来了解下 Qt 的文件以及输入输出的功能,也就是 I/O 系统. Qt 通过QIODevice提 ...

  5. VS2012 快捷键 VS Resharper 设置

    原文 http://www.cnblogs.com/skyangell/archive/2013/03/24/2979835.html 一直用Resharper插件,最近发现Ctrl+E,C快捷见被R ...

  6. 【安装】python3&period;4版安装与2&period;x共存问题

    首先,到官网去下载python3.x版,这里推荐3.4以上的版本,自带pip库,以后不用自己另外下载 3.4.4版: https://www.python.org/downloads/release/ ...

  7. 以太网帧、TCP与UDP段以及IP数据报格式总结

    传输层及其以下的机制由内核提供,是操作系统的一部分,应⽤层由⽤户进程提供应⽤层数据通过协议栈发到⽹络上时,每层协议都要加上⼀个数据⾸部(header),称为封装.不同的协议层对数据包有不同的称谓,在传 ...

  8. C&num;如何释放已经加载的图片

    使用Image.FromFile取磁盘上的图片时,这个方法会锁定图片文件,而且会导致内存占用增大, 有几种方法解决:一:将Image类转换成Bitmap类System.Drawing.Image im ...

  9. AngularJS数据绑定中数据监控的机制说明

    from : http://docs.angularjs.org/guide/scope When the browser calls into JavaScript the code execute ...

  10. Java创建对象的初始化顺序

    1. 初始化块 初始化块通常写在类的构造方法之前,由花括号括起来,通常包含对成员属性进行初始化的语句: 初始化块分为instance初始化块和static初始化块,初始化块在构造方法执行之前被执行: ...

相关文章