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 ...
随机推荐
- html/css学习笔记(一)
============================================================================================= 盒子模型 1 ...
- mooc《数据结构》 习题1.8 二分查找
本题要求实现二分查找算法. 函数接口定义: Position BinarySearch( List L, ElementType X ); 其中List结构定义如下: typedef int Posi ...
- CloudSim源代码学习——虚拟机(VM)
package org.cloudbus.cloudsim; import java.util.ArrayList;//This class provides methods to manipulat ...
- Linux 学习笔记之超详细基础linux命令 Part 4
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 3----------------- ...
- Intent调用常见系统组件
// 调用浏览器 Uri webViewUri = Uri.parse("http://blog.csdn.net/zuolongsnail"); Intent intent = ...
- 【Java入门提高篇】Day22 Java容器类详解(五)HashMap源码分析(上)
准备了很长时间,终于理清了思路,鼓起勇气,开始介绍本篇的主角——HashMap.说实话,这家伙能说的内容太多了,要是像前面ArrayList那样翻译一下源码,稍微说说重点,肯定会让很多人摸不着头脑,不 ...
- Nodejs 安装 on centos7
本文演示如何在CentOS7上安装Nodejs. 1 准备工作 1.1 浏览器访问安装包下载地址: https://nodejs.org/dist/ 找到需要安装的版本,以8.11.3版本为例,地址为 ...
- python第六十五天--python操作mysql
pymysql模块对mysql进行 import pymysql # 创建连接 conn = pymysql.connect(host='127.0.0.1', port=3306, user='ro ...
- EF扩展 更新指定字段
using System.Data.Entity.Infrastructure; using System.Threading.Tasks; /// <summary> /// EF扩展 ...
- 在Emacs中使用git操作
在Emacs中使用git操作 1.安装 magit 插件 2.安装后开始使用 3.使用方法: . 使用 M-x:magit-status 打开当前仓库查看基本信息 .使用 ? 键查看magit命令绑定 ...