点击查看react入门(1)

点击查看react入门(2)

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

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 入门实例教程(转载)

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

  5. React 入门实例教程

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

  6. React入门 (1)—使用指南(包括ES5和ES6对比)

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

  7. React入门简单实践

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

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

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

  9. React入门资源整理

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

随机推荐

  1. 【资源】.Net 入门@提高 - 逆天的高薪之路!

     入门看视频,提高看书籍,飘升做项目.老练研开源,高手读外文,大牛讲低调~    官方学习计划 http://www.cnblogs.com/dunitian/p/5667901.html ----- ...

  2. 【NLP】揭秘马尔可夫模型神秘面纱系列文章(一)

    初识马尔可夫和马尔可夫链 作者:白宁超 2016年7月10日20:34:20 摘要:最早接触马尔可夫模型的定义源于吴军先生<数学之美>一书,起初觉得深奥难懂且无什么用场.直到学习自然语言处 ...

  3. 玩转spring boot——结合JPA入门

    参考官方例子:https://spring.io/guides/gs/accessing-data-jpa/ 接着上篇内容 一.小试牛刀 创建maven项目后,修改pom.xml文件 <proj ...

  4. node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  5. Flyweight(享元模式)

    import java.util.Hashtable; /** * 享元模式 * @author TMAC-J * 享元模式一般和工厂模式一起使用,但此处为了更好说明,只用享元模式 * 定义:享元模式 ...

  6. Linux网络驱动--snull

    snull是<Linux Device Drivers>中的一个网络驱动的例子.这里引用这个例子学习Linux网络驱动. 因为snull的源码,网上已经更新到适合最新内核,而我自己用的还是 ...

  7. 理解Storm并发

    作者:Jack47 PS:如果喜欢我写的文章,欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 注:本文主要内容翻译自understanding-the-parall ...

  8. webpack解惑:require的五种用法

    我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...

  9. ASP.NET Web API 控制器创建过程(一)

    ASP.NET Web API 控制器创建过程(一) 前言 在前面对管道.路由有了基础的了解过后,本篇将带大家一起学习一下在ASP.NET Web API中控制器的创建过程,这过程分为几个部分下面的内 ...

  10. ABP源码分析三十九:ABP.Hangfire

    ABP对HangFire的集成主要是通过实现IBackgroundJobManager接口的HangfireBackgroundJobManager类完成的. HangfireBackgroundJo ...