React入门(2)
承接上次学习的react,今天继续学习react
划重点！！！
今天学习的全是react的核心概念:①props②ref③state
一.核心概念---props
作用:主要用来实现父子组件通信
1. 使用props来实现父子组件通信(父传子)-----跟vue的props用法差不多
步骤1：父组件发送
<Son sonName='zhangsan'></Son>
步骤2：子组件接收
this.props.sonName
来个栗子练习:
2.2 使用props来实现子父组件通信(子传父)
原理: 通过自定义属性是可以传递一个方法的！
步骤1：在父组件中 定义一个有参数的方法
rcvMsg:function(msg){}
步骤2：父组件调用子组件时，通过自定义属性将方法传递给子组件
<Son myFunc={this.rcvMsg}></Son>
步骤3：子组件调用父组件传来的方法，并进行传值
this.props.myFunc(123)
举个栗子demo08:
再来一个栗子demo09加深印象:
3. this.props.children
this.props对象的键值对和组件调用时的属性是一一对应的，但是有一个例外:this.props.children
类型：
array：嵌套的子标记有多个
obj:嵌套的子标记有1个
undefined:没有嵌套
为了防止因为类型而导致的错误，react官方提供了一个方法:
React.Children.map(
this.props.children,
function(child){}
)
直接来个栗子demo0:
二.核心概念--ref
ref(reference)，可以帮助得到组件类的实例的引用 (父组件主动的到子组件中获取数据)
使用步骤：
①给我们要查找的元素或者组件 指定一个ref属性
<any ref='myTest'></any>
②通过refs去获取ref对应的元素或者组件
this.refs.myTest.**
这个很简单，就上个栗子demo11：
三.核心概念--state
1.state是负责完成数据在组件内部的定义、读写操作
2.基本功能：
①数据绑定:
将状态中的数据 绑定到视图：数据变化，视图就会更新 MVP模式
这里简要讲解一下MVP模式
MVP 全称：Model-View-Presenter ；MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。
看下图:
P在这里相当于一个中间者的校色，view里面需要M里的东西，就告诉P，p再告诉M，P做出相应的变化，M可以保持不变；model里面需要M里的东西，就告诉P，p再告诉View，P做出相应的变化，View可以保持不变.
至于什么是MVC模式，什么是MVVM(典型的vue中的双向绑定的原理)，这里就不讨论了，有兴趣的可以自己去查阅资料。
<p>{this.state.count}</p>
②完成数据的基本管理，包括初始化、读、写
3.用法
初始化:
getInitialState:function(){
return {count:0,age:10}
}
读：
this.state.count
this.state.age
写：
this.setState({count:1})
this.setState({count:1,age:1})
this.setState({count:2},()=>{
//状态写操作成功之后的回调函数
})
今天的重点已经讲完了，现在来个综合练习:
如下图:
在输入框中输入值，控制台实时打印输入框中的结果，当输入完毕后点击按钮，打印输入的真实值
最后的代码:
<!-- !+tab -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id='example'></div>
<script type="text/babel">
var AComponent = React.createClass({
handleChange:function(){
//获取输入框的值
var myValue = this.refs.myInput.value
console.log("输入框当前的数据是",myValue)
//将值发送父组件MainComponent
this.props.myFunc(myValue)
},
render:function(){
return <input ref="myInput" onChange={this.handleChange} type='text' placeholder="plz input sth"/>
}
}) var BComponent = React.createClass({
handleClick:function(){
//读取通过自定义属性myValue所传来的数据
console.log(this.props.myValue)
},
render:function(){
return <button onClick={this.handleClick}>
clickMe
</button>
}
})
// 将myContent的所有操作按照state来重构
//(:- 15:15)
var MainComponent = React.createClass({
//myContent:"",
getInitialState:function(){
return {myContent:""}
},
rcv:function(msg){
console.log("父组件接收到子组件传来的数据是",msg);
//this.myContent = msg;//保存数据
this.setState({myContent:msg});
},
render:function(){
return <div>
<AComponent myFunc={this.rcv}></AComponent>
<BComponent myValue={this.state.myContent}></BComponent>
</div>
}
}) ReactDOM.render(
<MainComponent></MainComponent>,
document.getElementById('example')
)
</script> </body>
</html>
总结:
React入门(2)的更多相关文章
- react入门（3）
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- 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 ...
随机推荐
- 一文看懂Java序列化
一文看懂Java序列化 简介 Java实现 Serializable 最基本情况 类的成员为引用 同一对象多次序列化 子父类引用序列化 可自定义的可序列化 Externalizable:强制自定义序列 ...
- iOS中的分类和扩展
一.什么是分类? 概念:分类(Category)是OC中的特有语法,它是表示一个指向分类的结构体指针.根据下面源码组成可以看到它没有属性列表,原则上是不能添加成员变量(其实可以借助运行时功能,进行关联 ...
- ES6/JavaScript一些‘巧用’
前言 第一次发表文章,如有不好的地方请见谅/ 在编写JavaScript代码的时候存在的一些方法和技巧,虽然有时候条条大路都通向罗马,但是也许总会有那么一条最短的路径可走.本文将一些都知道却不怎么用的 ...
- 钉钉小程序不用canvas在后端绘图前端用image标签获取图片的实践
公司的需求要用电子员工卡代替用了N久的工作证,在各种场合刷二维码来代替刷卡.在钉钉小程序里实现.感觉这回又要躺坑里了. 钉钉小程序第一次做.我这个自封的GDI+大神才不要想用钉钉jsapi的方式用ca ...
- AOP和spring AOP学习记录
AOP基本概念的理解 面向切面AOP主要是在编译期或运行时,对程序进行织入,实现代理, 对原代码毫无侵入性,不破坏主要业务逻辑,减少程序的耦合度. 主要应用范围: 日志记录,性能统计,安全控制,事务处 ...
- 利用iTunes给MP3添加专辑插图
利用iTunes给MP3添加专辑插图 打开iTunes 准备好没有专辑插图的mp3文件和插图 将准备好的mp3文件拖入iTunes 右键菜单选择专辑信息选项 在专辑信息里面选择插图 点击左下角的添加插 ...
- HDFS NameNode详解
1. namenode介绍 namenode管理文件系统的命名空间.它维护着文件系统树及整棵树内所有的文件和目录.这些信息以两个文件形式永久保存在本地磁盘上:命名空间镜像文件fsimage和编辑日志文 ...
- Numpy之数据保存与读取
在pandas使用的25个技巧中介绍了几个常用的Pandas的使用技巧,不少技巧在机器学习和深度学习方面很有用处.本文将会介绍Numpy在数据保存和读取方面的内容,这些在机器学习和深度学习方向也大 ...
- Docker深入浅出系列 | 5分钟搭建你的私有镜像仓库
Docker已经上市很多年,不是什么新鲜事物了,很多企业或者开发同学以前也不多不少有所接触,但是有实操经验的人不多,本系列教程主要偏重实战,尽量讲干货,会根据本人理解去做阐述,具体官方概念可以查阅官方 ...
- Asp.Net Core 中IdentityServer4 授权原理及刷新Token的应用
一.前言 上面分享了IdentityServer4 两篇系列文章,核心主题主要是密码授权模式及自定义授权模式,但是仅仅是分享了这两种模式的使用,这篇文章进一步来分享IdentityServer4的授权 ...