• 从 render 函数可以看出来,组件内部是通过 this.props 的方式获取到组件的参数的,如果 this.props 里面有需要的属性我们就采用相应的属性,没有的话就用默认的属性。

    那么怎么把 props 传进去呢?在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为 props 对象的键值。

  • 没有 state 的组件叫无状态组件(stateless component),设置了 state 的叫做有状态组件(stateful component)。

    因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,也会在一定程度上增强组件的可复用性。

  • React.js 非常鼓励无状态组件,在 0.14 版本引入了函数式组件——一种定义不能使用 state 组件。

    以前一个组件是通过继承 Component 来构建,一个子类就是一个组件。而用函数式的组件编写方式是一个函数就是一个组件,你可以和以前一样通过 使用该组件。不同的是,函数式组件只能接受 props 而无法像跟类组件一样可以在 constructor 里面初始化 state。你可以理解函数式组件就是一种只能接受 props 和提供 render 方法的类组件。

  • 默认配置 defaultProps

    上面的组件默认配置我们是通过 || 操作符来实现。这种需要默认配置的情况在 React.js 中非常常见,所以 React.js 也提供了一种方式 defaultProps,可以方便的做到默认配置。

class LikeButton extends Component {
  static defaultProps = {
    likedText: '取消',
    unlikedText: '点赞'
  }
}

然后通过this.props调用。

props 一旦传入,你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props,从而达到更新的效果。

react 知识点2的更多相关文章

  1. React知识点总结1

    最近打算把react知识点总结下: React特点 1.虚拟DOM 在内存中操作DOM,在内存中创建数据结构,只会更新有差异的地方 2.组件化 页面分成若干个组件,每个组件包含逻辑结构和样式 组件仅包 ...

  2. react知识点汇总

    ①uncontrolComponent & controlComponent If your form is incredibly simple in terms of UI feedback ...

  3. react 知识点

    1.react内联样式写法: <div style={{width:'200px',height:'100px',border:'1px solid red'}}> </div> ...

  4. react知识点

    http://www.cocoachina.com/webapp/20150721/12692.html http://blog.csdn.net/slandove/article/details/5 ...

  5. react知识点总结(持续更新。。。)

    一.webpack 1. 什么是以及为什么要使用webpack 现在的网页功能越来越丰富,所需要的JavaScript和模块也会很多,为开发更加简洁,出现了以下方法,如模块化,scss,typescr ...

  6. React知识点整理

    面试题:三大框架中数据绑定实现上有何绑定? 一.概述:是Facebook维护的一个构建用户界面的JS库,核心很精简,但是生态圈扩展很大. React:MVVM框架 React-Router:路由 Re ...

  7. 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>

    Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...

  8. React实战一

    目录 1. 搭建环境 2. React知识点 1. 组件 1.1 定义一个组件 1.2 组合与拆分组件 1.3 组件传值 1.4 state 1.5 生命周期函数 1.6 无状态组件 1.7 List ...

  9. React 解析/ 第二节 使用 Reac

    官方脚手架 create-react-app React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpa ...

随机推荐

  1. Ionic2开发环境搭建、项目创建调试与Android应用的打包、优化

    Ionic2开发环境搭建.项目创建调试与Android应用的打包.优化. windows下ionic2开发环境配置步骤如下: 下载node.js环境,稳定版本:v6.9.5 下载android stu ...

  2. SharePoint Framework 企业向导(一)

    博客地址:http://blog.csdn.net/FoxDave 简介 SharePoint Framework(SPFx)是一个新的SharePoint用户接口扩展的开发模型,它用来补充现有的 ...

  3. connection reset 分析解决(转载)

    文章转自:https://my.oschina.net/xionghui/blog/508758;记录下来以便以后复习查阅; 在使用HttpClient调用后台resetful服务时,“Connect ...

  4. <Consistency><of HBase><CAP><ACID>

    Overview 讨论一些(分布式)(存储)系统的一致性 CAP原理 随着分布式事务的出现,传统的单机事务模型(ACID)已经无法胜任,尤其是对于一个高访问量.高并发的互联网分布式系统来说. 如何构建 ...

  5. 用StringHelper.Split分解字符串

    StringHelper提供了大量的方法,从而用链试写法处理字符串,实现对字符串的各种操作.比如: var s1,s2:string; begin s1:='abcdefg'; s2:=s1.subs ...

  6. ubantu安装node、npm、cnpm、live-server

    更新ubuntu软件源 sudo apt-get update sudo apt-get install -y python-software-properties software-properti ...

  7. python第一天 计算机基础

    计算机硬件组成 控制器: 运算器 存储器I/O设备 与运行程序有关的三大核心硬件 cpu,内存,硬盘 运行软件时,硬件的运作流程 1.软件最先存放于硬盘当中,软件的代码运行时会由硬盘读入内存 2.cp ...

  8. 使用scrapy爬取dota2贴吧数据并进行分析

    一直好奇贴吧里的小伙伴们在过去的时间里说的最多的词是什么,那我们就来抓取分析一下贴吧发文的标题内容,并提取分析一下,看看吧友们在说些什么. 首先我们使用scrapy对所有贴吧文章的标题进行抓取 scr ...

  9. HDU 1004 Let the Balloon Rise(map应用)

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  10. redis的哨兵模式

    我是在一台服务器上安装了三个redis  一主两从 想安装gcc gcc-c++ make tcl  lrzsz yum -y install gcc gcc-c++ make tcl  lrzsz ...