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的更多相关文章

  1. React 组件&Props

    组件&Props 组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需要专注于构建每一个单独的组件. 组件从概念上看就像是函数,它可以接受任意的输入值(称之为& ...

  2. React组件系统、props与状态(state)

     多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...

  3. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  4. React组件(组件属性this.state和this.props,css样式修饰组件)

    目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...

  5. React组件的state和props

    React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...

  6. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  7. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  8. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  9. React 组件性能优化

    React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...

  10. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

随机推荐

  1. html/css学习笔记(一)

    ============================================================================================= 盒子模型 1 ...

  2. mooc《数据结构》 习题1.8 二分查找

    本题要求实现二分查找算法. 函数接口定义: Position BinarySearch( List L, ElementType X ); 其中List结构定义如下: typedef int Posi ...

  3. CloudSim源代码学习——虚拟机(VM)

    package org.cloudbus.cloudsim; import java.util.ArrayList;//This class provides methods to manipulat ...

  4. Linux 学习笔记之超详细基础linux命令 Part 4

    Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 3----------------- ...

  5. Intent调用常见系统组件

    // 调用浏览器 Uri webViewUri = Uri.parse("http://blog.csdn.net/zuolongsnail"); Intent intent = ...

  6. 【Java入门提高篇】Day22 Java容器类详解(五)HashMap源码分析(上)

    准备了很长时间,终于理清了思路,鼓起勇气,开始介绍本篇的主角——HashMap.说实话,这家伙能说的内容太多了,要是像前面ArrayList那样翻译一下源码,稍微说说重点,肯定会让很多人摸不着头脑,不 ...

  7. Nodejs 安装 on centos7

    本文演示如何在CentOS7上安装Nodejs. 1 准备工作 1.1 浏览器访问安装包下载地址: https://nodejs.org/dist/ 找到需要安装的版本,以8.11.3版本为例,地址为 ...

  8. python第六十五天--python操作mysql

    pymysql模块对mysql进行 import pymysql # 创建连接 conn = pymysql.connect(host='127.0.0.1', port=3306, user='ro ...

  9. EF扩展 更新指定字段

    using System.Data.Entity.Infrastructure; using System.Threading.Tasks; /// <summary> /// EF扩展 ...

  10. 在Emacs中使用git操作

    在Emacs中使用git操作 1.安装 magit 插件 2.安装后开始使用 3.使用方法: . 使用 M-x:magit-status 打开当前仓库查看基本信息 .使用 ? 键查看magit命令绑定 ...