React-组件 & Props
React元素可以只是DOM标签
const element = <div />;
React元素也可以是用户自定义的组件:
const element = <Welcome name="Sara" />;
组件可以将UI切分成一些的独立的、可复用的部件,这样就只需专注于构建每一个单独的部件。组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。
函数定义/类定义组件:
可以用JavaScript函数和ES6 class两种方式来定义组件
方法一:JavaScript函数:
function Welcome(props) {j
return <h1>Hello, {props.name}</h1>;
}
该函数是一个有效的React组件,它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件,是因为从字面上来看,它就是一个JavaScript函数。
方法二:ES6 class
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
注意:组件的返回值只能有一个根元素。组件名称必须以大写字母开头。
Props
当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。例如,这段代码会在页面上渲染出”Hello,Sara”:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
在这个例子中发生了什么:
我们对<Welcome name="Sara" />元素调用了ReactDOM.render()方法。
React将{name: 'Sara'}作为props传入并调用Welcome组件。
Welcome组件将<h1>Hello, Sara</h1>元素作为结果返回。
React DOM将DOM更新为<h1>Hello, Sara</h1>。
注意:Props具有只读性,无论是使用函数或是类来声明一个组件,它决不能修改它自己的props。
React-组件 & Props的更多相关文章
- React 组件&Props
组件&Props 组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需要专注于构建每一个单独的组件. 组件从概念上看就像是函数,它可以接受任意的输入值(称之为& ...
- React组件系统、props与状态(state)
多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React组件(组件属性this.state和this.props,css样式修饰组件)
目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React 组件性能优化探索实践
转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...
- webpack 打包一个简单react组件
安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...
- React 组件性能优化
React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...
- React组件属性部类(propTypes)校验
React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...
随机推荐
- Flume初入门简单配置与使用
1.Flume在集群中扮演的角色 Flume.Kafka用来实时进行数据收集,Spark.Storm用来实时处理数据,impala用来实时查询. 2.Flume框架简介 1.1 Flume提供一个分布 ...
- 微信小程序测试二三事
微信小程序虽是微信推出的新形态的产品,但是在测试思路上跟其他的传统测试,大相径庭.既然大相径庭,那我们该如何测试呢. 功能测试功能测试跟传统的web功能测试一样,不是app的功能测试哦.这是因为小程序 ...
- Linux 下Shell变量,环境变量的联系与区别
Linux下Shell变量,环境变量的联系与区别 by:授客 QQ:1033553122 1. 简介 linux下的变量可分成两种:Shell变量和环境变量. Shell变量,又称本地变量,包括私有 ...
- off by null 实战
前言 off by null 是一个比较有意思的技术 下面通过 hctf2018 的 heapstrom_zero 实战一波. 相关文件(exp, 题目)位于 https://gitee.com/ha ...
- android recovery 升级之USB设备挂载
Recovery升级过程,通常会从两个地方获取升级包update.zip升级,一般在线升级,会把升级包下载到cache分区,本地升级会从usb或者tf卡中升级.本文讨论下,本地USB升级时,无法挂载U ...
- 洗礼灵魂,修炼python(62)--爬虫篇—模仿游戏
前言 <模仿游戏>这个电影相信如果你是搞IT的,即使没看过也听过吧?电影讲述了计算机之父——阿兰-图灵的一些在当时来讲算是计算机史里的里程碑事迹了.而[模仿游戏]这个名字咋一看,貌似和电影 ...
- python第三十六天-----类中的特殊成员方法
__doc__ 查看尖的描述信息 __module__表示当前操作的对象所在的模块 __class__表示当前操作的对象所属的类 __init__构造方法 通过类创建对象自动执行 __del__析构方 ...
- EasyUI报错 $(...).accordion is not a function
参考资料: https://stackoverflow.com/questions/9017634/accordion-is-not-a-function 原因:加载了2次jquery js文件
- windows防火墙安全设置指定ip访问指定端口
场景摘要: 1.我有三台腾讯云服务器 2.我日常办公网络的ip换了 3.我在腾讯云上面改了安全规则,也不能访问我A服务器的21,1433等端口 4.开始我以为是办公网络的安全设置问题 5.我进B服务器 ...
- Win10更换电脑,又不想重装系统的解决方法
问题描述: 在公司因为两年前用的i3的电脑很卡,然后想换i5的电脑,但是又不想重装系统,因为安装的东西太多了,重装很麻烦 Windows to go介绍: Windows To Go是Windows ...