react入门（3）
十、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）的更多相关文章
- react入门（1）
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门（2）
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门（4）
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南（包括ES5和ES6对比）
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
随机推荐
- 阿里签名中URLEncode于C#URLEncod不同之处
问题 如上图所示,阿里云的PercentEncode 转换! 为 %21 PercentEncode 源码为: package com.aliyuncs.auth; import java.io.Un ...
- System.FormatException: GUID 应包含带 4 个短划线的 32 位数(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)。
在NHibernate数据库查询中出现了这个错误,由于是数据库是mysql的,当定义的字段为char(36)的时候就会出现这个错误. [解决方法] 将char(36) 改成varchar(40)就行了 ...
- Xamarin与Visual stuido2015离线安装包分享
最近看见大伙留言才知道国内安装Xamarin开发原来这么艰辛啊! 第一:网速不快 第二:Android SDK下载受限 等等... 鉴于这些原因,特写下这篇文章以及分享打包好的离线包以帮助大家尽快体验 ...
- Java 堆内存与栈内存异同(Java Heap Memory vs Stack Memory Difference)
--reference Java Heap Memory vs Stack Memory Difference 在数据结构中,堆和栈可以说是两种最基础的数据结构,而Java中的栈内存空间和堆内存空间有 ...
- Node.js学习笔记——Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- 在Ubuntu13.04中配置Jexus+Mono3.2运行Asp.Net Mvc 4站点 (一)
这篇文章打算分两部分来写,第一部分介绍在Ubuntu中安装和配置.Net Framework4.5环境,第二部分介绍如何部署Asp.Net Mvc 4站点并确保Mvc4的几个重要特性都能正常工作. 一 ...
- 警惕！高版本VS发布时预编译导致Mono中Razor找不到视图
早前一段时间,一位朋友在Q群里面找到我,说它按照<Linux.NET学习手记>的操作,把一个ASP.NET MVC 4.0的项目部署到Mono之后出现Razor无法找到视图的现象.当时费了 ...
- 在 Linux 上使用 Jexus + Mono 建立 Asp.Net 网站.
godaddy 买了个net空间,一点也不好用. 几个G的数据, 上传数据只有几kb , 想用 ssh 登录上去用 wget 下载,也不行 windows的主机貌似没有 ssh 功能... 后来实在忍 ...
- Disque：Redis之父新开源的分布式内存作业队列
Disque是Redis之父Salvatore Sanfilippo新开源的一个分布式内存消息代理.它适应于"Redis作为作业队列"的场景,但采用了一种专用.独立.可扩展且具有容 ...
- 一步步学习javascript基础篇（9）：ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...