• 从 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. 90%会搞错的JavaScript闭包问题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  2. 文件操作---with语句

    with语句 为了避免打开文件后忘记关闭,可以通过管理上下文,即: with open('file','r','encoding='uth-8'') as f: #f为文件句柄 for line in ...

  3. 解决Could not open Hibernate Session for transaction; nested exception is java.lang.NoClassDefFoundError: org/hibernate/engine/transaction/spi/TransactionContext

    我使用的是5.2.8的hibernate的jar包,运行的时候却报错Could not open Hibernate Session for transaction; nested exception ...

  4. apache rewrite 规则

    啥是虚拟主机呢?就是说把你自己的本地的开发的机子变成一个虚拟域名,比如:你在开发pptv下面的一个项目 127.0.0.1/pptv_trunk,你想把自己的机器域名变成www.pptv.com.那么 ...

  5. python2.6.6 升级 2.7.X

    下载包 解压 cd 进入 ./configure && make all && make install && make clean && ...

  6. Linux shell脚本中shift

    Linux shell脚本中shift的用法说明 shift命令用于对参数的移动(左移),通常用于在不知道传入参数个数的情况下依次遍历每个参数然后进行相应处理(常见于Linux中各种程序的启动脚本). ...

  7. TCP三次握手及释放连接详解(转)

    一.TCP头部简介 ACK :即确认字符,在数据通信中,接收站发给发送站的一种传输类控制字符.表示发来的数据已确认接收无误.TCP报文格式中的控制位由6个标志比特构成,其中一个就是ACK,ACK为1表 ...

  8. python 网络数据采集1

    python3 网络数据采集1 第一部分: 一.可靠的网络连接: 使用库: python标准库: urllib python第三方库:BeautifulSoup 安装:pip3 install  be ...

  9. Unity 灯光系统详解

    Unity 灯光系统详解 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心 ...

  10. Unity 3D第三人称视角、用途广泛限定角度(视角不能360度翻转)

    Unity第三人称相机视角控制 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分 ...