中秋过后刚好结束在上一家公司的工作,明天开始要正式的找工作了，最近也投了几家公司收到几分面试邀请。在面试的过程中几个面试官聊到了react(当然也有聊了vue,angular)。感觉不懂react都不好意思找前端的工作了,其实我本人对react还是很有好感的无论是jsx还是对es6友好的支持都很吸引我所以平时也找些例子学习自己写几个小demo,但由于上家公司的项目中使用的是avalon2(后转vue)一直忙于项目的事半年没接触对所以对觉得react很陌生了。待业之际乘此机会重操(学)react。

props

react 组件化开发的思路(Component)一直被人称赞。其中父组件和子组件的通信就是通过props来传递的我看看props的几种用法:

<!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>
</head>
<body>
    <div id="app" ></div>
    <script src="./dist/js/bundle.js" ></script>
</body>
</html>

js文件

import React,{Component} from 'react';
import {render} from 'react-dom';
class MyComponent extends Component{

    render(){
      return(
        <div>
          <h1>{ this.props.name }</h1>
        </div>
      )

    }
}

render(<MyComponent name="json" />,
  document.querySelector("#app")
); //可以这样传递普通的传递方式

解构传递

import React,{Component} from 'react';
import {render} from 'react-dom';
const props = { //定义一个对象
  name:'cqs',
  age:'25'
}

class MyComponent extends Component{

    render(){
      return(
        <div>
          <h1>{ this.props.name }</h1>
          <h1>{ this.props.age }</h1>
        </div>
      )

    }
}

render(<MyComponent {...props} />, //对象解构传递
  document.querySelector("#app")
);//还可以解构传递

props 不止可以传递对象还是传递方法

import React,{Component} from 'react';
import {render} from 'react-dom';

class SupComponent extends Component{
  constructor(){
      super();
      this.state = {
        number:0
      }
  }
  handleAdd(){
    this.setState({  number:++this.state.number}); //把方法放在父组件(控制器Controller)通过props传递给子组件,子组件触发调用父组件的state发生改变UI(View视图跟着变)
  }
    render(){

      return(
          <div>
              <SubComponent  handleAdd={ this.handleAdd.bind(this) }  />
              <p> { this.state.number } </p>
          </div>
      )
    }
}

class SubComponent extends Component{

    render(){
        return(
            <div>
              <button onClick={ this.props.handleAdd } >普通按钮</button>
            </div>
        )
    }
}

 render( <SupComponent/>,document.querySelector("#app") );

react学习之props的更多相关文章

  1. React 学习(二) ---- props验证与默认属性

    在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...

  2. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  3. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  4. React学习笔记(一) 基础知识

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...

  5. React学习系列

    React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...

  6. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  7. react 学习与使用记录

    相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...

  8. React学习笔记-03 state

    每一个组件都有状态,比如一个开关,开 和 关,都是一种state.那么react是怎么管理它的state的? React 把用户界面当做状态机,可以轻松的让用户界面和数据保持一致.用户只需要更新组件的 ...

  9. 【react学习】关于react框架使用的一些细节要点的思考

    ( _(:3 」∠)_给园友们提个建议,无论是API文档还是书籍,一定要多看几遍!特别是隔一段时间后,会有意想不到的收获的)   这篇文章主要是写关于学习react中的一些自己的思考:   1.set ...

随机推荐

  1. xutils的HttpUtils,Post和Get基本使用，以及BitmapUtils的简单使用

    开篇报错注意:本教程是基于xUtils-2.6.14.jar版本实现的 由于studio中6.0以后安卓取消了httpclient,而xutils则基于httpclient开发的,所以现在无法使用,将 ...

  2. A Bit Of Knowledge

    iOS推崇使用png格式的图片,说这样不会失帧 imageNamed 和 imageWithContentOfFile的区别 imageNamed会使用系统缓存,对重复加载的图片速度会快一些,效果好. ...

  3. C#线程池ThreadPool的理解

    在多线程编程中,线程的创建和销毁是非常消耗系统资源的,因此,C#引入了池的概念,类似的还有数据库连接池,这样,维护一个池,池内维护的一些线程,需要的时候从池中取出来,不需要的时候放回去,这样就避免了重 ...

  4. winsock开发重复定义问题

    参考: VS2013使用winsock.h和winsock2.h发生冲突后的终极解决方法:http://www.cnblogs.com/Shirlies/p/5137548.html WINSOCK. ...

  5. BZOJ 2176 Strange String （最小表示法）

    题目大意: 与别的裸题的唯一不同点是其符号的ASCII码值在3 ~ 254 之间. 算法讨论: 最小表示法直接上.但是唯一不同的就是注意这里的字符范围,用char是会get wa的,所以要用unsig ...

  6. 第一章 Qt入门

    1.1Qt 窗口部件 widget,用户界面的一个可视化元素,任意窗口部件都可以作为窗口.可以通过简单的HTML修改丰富样式 1.2建立连接 Qt的窗口部件通过发射信号(signal)来表明一个用户动 ...

  7. iOS UIWebView 访问https 绕过证书验证的方法

    在文件开始实现  allowsAnyHTTPSCertificateForHost 方法 @implementation NSURLRequest (NSURLRequestWithIgnoreSSL ...

  8. linux下python多版本共存

    为何要安装python,linux下不是已经集成了python吗? 大多数linux系统都集成了python,但是他们的版本太低了.不能满足我们的需求,尤其是好多系统居然仍停留在 python2.6. ...

  9. 异常处理与调试5 - 零基础入门学习Delphi54

    调试(Debug) 让编程改变世界 Change the world by program [caption id="attachment_2731" align="al ...

  10. EF 请求数据是缓存 求大神解释

    // //AliexpressEntities MyaliexpressEntities 为了事物一致性 在别的方法里面传过来的 实质还是 (  AliexpressEntities aliexpre ...