承接上次学习的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},()=>{
//状态写操作成功之后的回调函数
})

今天的重点已经讲完了，现在来个综合练习:

如下图:

在输入框中输入值，控制台实时打印输入框中的结果，当输入完毕后点击按钮，打印输入的真实值

最后的代码:

  1.  <!-- !+tab -->
  2.  <!DOCTYPE html>
  3.  <html lang="en">
  4.  <head>
  5.    <meta charset="UTF-8">
  6.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.    <title>Document</title>
  9.    <script src="js/react.js"></script>
  10.    <script src="js/react-dom.js"></script>
  11.    <script src="js/browser.min.js"></script>
  12.  </head>
  13.  <body>
  14.    <div id='example'></div>
  15.    <script type="text/babel">
  16.      var AComponent = React.createClass({
  17.        handleChange:function(){
  18.          //获取输入框的值
  19.          var myValue = this.refs.myInput.value
  20.          console.log("输入框当前的数据是",myValue)
  21.          //将值发送父组件MainComponent
  22.          this.props.myFunc(myValue)
  23.        },
  24.        render:function(){
  25.          return <input ref="myInput" onChange={this.handleChange} type='text' placeholder="plz input sth"/>
  26.        }
  27.      })
  28.  
  29.      var BComponent = React.createClass({
  30.        handleClick:function(){
  31.          //读取通过自定义属性myValue所传来的数据
  32.          console.log(this.props.myValue)
  33.        },
  34.        render:function(){
  35.          return <button onClick={this.handleClick}>
  36.            clickMe
  37.          </button>
  38.        }
  39.      })
  40.      // 将myContent的所有操作按照state来重构
  41.      //(:- 15:15)
  42.      var MainComponent = React.createClass({
  43.        //myContent:"",
  44.        getInitialState:function(){
  45.          return {myContent:""}
  46.        },
  47.        rcv:function(msg){
  48.          console.log("父组件接收到子组件传来的数据是",msg);
  49.          //this.myContent = msg;//保存数据
  50.          this.setState({myContent:msg});
  51.        },
  52.        render:function(){
  53.          return <div>
  54.            <AComponent myFunc={this.rcv}></AComponent>
  55.            <BComponent myValue={this.state.myContent}></BComponent>
  56.          </div>
  57.        }
  58.      })
  59.  
  60.      ReactDOM.render(
  61.        <MainComponent></MainComponent>,
  62.        document.getElementById('example')
  63.      )
  64.    </script>
  65.  
  66.  </body>
  67.  </html>

总结:

props两种用法:
1.父给子传值
步骤:①父传递值:<Son recsth="值1"></Son>
②子接受值:this.props.recsth
2.子给父传值:通过传递一个带参数的方法,该方法的参数便是子组件传递给父组件的值
步骤:①父组件中定义一个有参数的方法: rcvMsg:function(msg){}
②父组件调用子组件的时候传递该带参数的方法:<Son myFun={this.rcvMsg}></Son>
③子组件调用父组件传来的方法，并传值:this.props.myFun(123)
自己的见解：子组件给父组件传值相当于两者之间需要一个沟通的桥梁，这个桥梁就是父组件中定义的带参数的方法，
父组件提供一个大碗(带参数的方法)给子组件，通过这个桥梁(大碗)告诉子组件我需要你的某个东西（就是待传递的参数值）
然后子组件收到信号后将这个东西(子组件传递给父组件的值)放到大碗中，最后大碗回到父组件手里(子组件调用该方法)，
父组件就收到子组件传递过来的东西(目标参数)了
ref的用法:非常简单
①给我们要查找的元素或者组件指定一个ref属性
<any ref='myTest'></any>
②通过refs去获取ref对应的元素或者组件
this.refs.myTest.**
state的用法:用于完成数据在组件内部的读写操作
分三步
初始化定义: getInitialState：function(){ return {count:"",age:12}}
读取数据(渲染数据):<p>{this.state.count}</p><span>{this.state.age}</span>
修改数据(写数据):this.setState({count:222})

React入门(2)的更多相关文章

  1. react入门（3）

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  2. react入门（1）

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

  3. react入门（2）

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

  4. react入门（4）

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

  5. React 入门实例教程(转载)

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

  6. React 入门实例教程

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

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

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

  8. React入门简单实践

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

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

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

  10. React入门资源整理

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

随机推荐

  1. PhaserJS 3 屏幕适配时的小坑 -- JavaScript Html5 游戏开发

    巨坑:在config内不要把 width 设为 window.innnerWidth在config内不要把 width 设为 window.innnerWidth在config内不要把 width 设 ...

  2. React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感

    仓库地址:Dragact手感丝滑的拖拽布局组件 预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dr ...

  3. 前端每日实战：42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频 ...

  4. js 面向对象中，定义一个函数的过程

    定义一个函数做的两件事:1: 实例化一个Function对象:2: 实例化一个Object对象,并给该函数扩展prototype属性指向这个构造函数 大致过程如图所示: 每一种引用类型(函数,对象,数 ...

  5. jsp内置对象（三）-----response对象

    response对象  response对象包含了响应客户端请求的有关信息,但在JSP中很少直接用到它.他是HttpServletResponse类的实例,response对象具有页面作用域,即访问一 ...

  6. Cinemachine简介

      先贴一下官方的Cinemachine文档Cinemachine Documentation 简介 使用   我们第一次使用Cinemachine时大概是这样一个流程: 在需要被控制的Camera上 ...

  7. 大型Java进阶专题(二) 软件架构设计原则（上）

    前言 ​ 今天开始我们专题的第一课了,也是我开始进阶学习的第一天,我们先从经典设计思想开始,看看大牛市如何写代码的,提升技术审美.提高核心竞争力.本章节参考资料书籍<Spring 5核心原理&g ...

  8. MyBatis 源码分析-项目总览

    MyBatis 源码分析-项目总览 1.概述 本文主要大致介绍一下MyBatis的项目结构.引用参考资料<MyBatis技术内幕> 此外,https://mybatis.org/mybat ...

  9. django实战商城项目注册业务实现

    设计到的前端知识 项目的前端页面使用vue来实现局部刷新,通过数据的双向绑定实现与用户的交互,下面来看一下需求,在用户输入内容后,前端需要做一些简单的规则校验,我们希望在在用户输入后能够实时检测,如果 ...

  10. linux最常用命令记录（一）

    一.vim个人最常用设置: vim .vimrc 然后添加以下内容 set nu set tabstop=4 set encoding=utf-8 二.查看磁盘空间相关命令 1.df -h   查看硬 ...