react 知识点2
从 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的更多相关文章
- React知识点总结1
最近打算把react知识点总结下: React特点 1.虚拟DOM 在内存中操作DOM,在内存中创建数据结构,只会更新有差异的地方 2.组件化 页面分成若干个组件,每个组件包含逻辑结构和样式 组件仅包 ...
- react知识点汇总
①uncontrolComponent & controlComponent If your form is incredibly simple in terms of UI feedback ...
- react 知识点
1.react内联样式写法: <div style={{width:'200px',height:'100px',border:'1px solid red'}}> </div> ...
- react知识点
http://www.cocoachina.com/webapp/20150721/12692.html http://blog.csdn.net/slandove/article/details/5 ...
- react知识点总结(持续更新。。。)
一.webpack 1. 什么是以及为什么要使用webpack 现在的网页功能越来越丰富,所需要的JavaScript和模块也会很多,为开发更加简洁,出现了以下方法,如模块化,scss,typescr ...
- React知识点整理
面试题:三大框架中数据绑定实现上有何绑定? 一.概述:是Facebook维护的一个构建用户界面的JS库,核心很精简,但是生态圈扩展很大. React:MVVM框架 React-Router:路由 Re ...
- 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>
Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...
- React实战一
目录 1. 搭建环境 2. React知识点 1. 组件 1.1 定义一个组件 1.2 组合与拆分组件 1.3 组件传值 1.4 state 1.5 生命周期函数 1.6 无状态组件 1.7 List ...
- React 解析/ 第二节 使用 Reac
官方脚手架 create-react-app React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpa ...
随机推荐
- angular2的依赖注入
更好阅读体验,请看原文 在读这篇文章之前,你要先了解一下什么是依赖注入,网上关于这个的解释很多,大家可以自行Google. 我们这一篇文章还是以QuickStart项目为基础,从头开始讲解怎么在Ang ...
- 牛客第三场多校 E Sort String
链接:https://www.nowcoder.com/acm/contest/141/E来源:牛客网 Eddy likes to play with string which is a sequen ...
- 基于spec互评Alpha版本
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2323] 队名:二次元梦之队 组长:刘莹莹 组员:周昊 潘世维 王玉潘 赵美增 ...
- 福大软工 · BETA 版冲刺前准备之拖鞋旅游队
拖鞋旅游队BETA 版冲刺前准备 前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10083834.html 本次作业:https://edu.c ...
- chromium ⑤
我们都知道chromium是用webkit完成页面显示的, 那么chromium是怎样集成和封装webkit的呢? 是怎样将webkit整合到自己的框架中,并将一个页面渲染出来的? 这篇我 ...
- python 爬虫第三方库
这个列表包含与网页抓取和数据处理的Python库 网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络 ...
- 启动apache 找不到 mbstring.dll
启动appserv时 提示 无法启动此程序 因为计算机中丢失php mbstring.dll 这种原因一般都是组件加载顺序引起的,在php.ini文件里确保 extension=php_mbstr ...
- idea 中新建Servlet
本文转载自 :itellij idea创建javaWeb以及Servlet简单实现 一.创建并设置javaweb工程 1.创建javaweb工程File --> New --> Proj ...
- threejs绘制顺序
renderer.sortObjects = false; 然后,scene.add(),就可以先add先画了,否则add的顺序和渲染出来的顺序不一定一致.
- 【Java】将字节转换成十六进制、BCD码输出
public class HexUtils { public static void main(String[] args) { byte []out = { 0, 1, 2, 3, 4, 5, 6, ...