react学习笔记_03-组件&props

组件 & Props的学习

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

1.函数组件与 class 组件

　　1).定义组件最简单的方式就是编写 JavaScript 函数：

function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}

　　这段代码就可以称之为函数组件，首先接收了props(代表属性)参数，其次返回react元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

　　2).class组件（使用 ES6 的 class）需要继承React.Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

　　注：class组件需要在类中的render()方法内返回react元素。上述两个组件在 React 里是等效的。

2.渲染组件

React 元素不仅可以使用dom标签也可以是用户自定义的组件：

　　dom标签

const element = <div />;

　　自定义标签

const element = <Welcome name="Sara" />;

　　当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。

　　这段代码会在页面上渲染 “Hello, Sara”：

function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}

const element = <Welcome name="Sara" />;

ReactDOM.render(

  element,

  document.getElementById('root')

);

注意： 组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

　　我们可以重新使用函数组件和class组件进行重构计时器：

　　函数组件重构：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>函数组件计时器</title>

</head>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    function Time(props){

        return (

            <div>

                <h1>当前时间是：{props.date.toLocaleTimeString()}</h1>

            </div>

        );

    }

    function tick(){

        ReactDOM.render(

            <Time date={new Date()}/>,

            document.getElementById('root')

        )

    }

    setInterval(tick,1000);

</script>

<body>

<div id="root"></div>

</body>

</html>

　　class组件计时器：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>函数组件计时器</title>

</head>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    class Time extends React.Component {

        render(){

            return (

                <div>

                    <h1>Hello, world!</h1>

                    <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>

                </div>

            );

        }

    }

    /*function Time(props){

        return (

            <div>

                <h1>当前时间是：{props.date.toLocaleTimeString()}</h1>

            </div>

        );

    }*/

    function tick(){

        ReactDOM.render(

            <Time date={new Date()}/>,

            document.getElementById('root')

        )

    }

    setInterval(tick,1000);

</script>

<body>

<div id="root"></div>

</body>

</html>

3.组合组件

　　组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。

　　我们可以创建一个可以多次渲染 Func组件的 App 组件:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>react组合组件</title>

</head>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    function Func(props) {

        return <h1>hello，{props.name}</h1>;

    }

    class App extends React.Component {

        render(){

            return (

                <div>

                    <Func name="Lisu" />

                    <Func name="Lisu" />

                    <Func name="Lisu" />

                </div>

            );

        }

    }

    const element = <App />;

    ReactDOM.render(

        element,

        document.getElementById('root')

    );

</script>

<body>

<div id="root"></div>

</body>

</html>

4.提取组件

　　将组件拆分为更小的组件。

function Comment(props) {

  return (

    <div className="Comment">

      <div className="UserInfo">

        <img className="Avatar"

          src={props.author.avatarUrl}

          alt={props.author.name}

        />

        <div className="UserInfo-name">

          {props.author.name}

        </div>

      </div>

      <div className="Comment-text">

        {props.text}

      </div>

      <div className="Comment-date">

        {formatDate(props.date)}

      </div>

    </div>

  );

}

　　该组件用于描述一个社交媒体网站上的评论功能，它接收 author（对象），text （字符串）以及 date（日期）作为 props。

　　该组件由于嵌套的关系，变得难以维护，且很难复用它的各个部分。因此，让我们从中提取一些组件出来。

　　1).首先提取Avatar(头像)部分：

function Avatar(props) {

  return (

    <Avatar className="Avatar"

      src={props.user.avatarUrl}

      alt={props.user.name}

    />

  );

}

　　2).替换Comment中的头像部分

function Comment(props) {

  return (

    <div className="Comment">

      <div className="UserInfo">

        <Avatar user={props.author} />

        <div className="UserInfo-name">

          {props.author.name}

        </div>

      </div>

      <div className="Comment-text">

        {props.text}

      </div>

      <div className="Comment-date">

        {formatDate(props.date)}

      </div>

    </div>

  );

}

　　3).抽取UserInfo组件　

function UserInfo(props) {

  return (

    <div className="UserInfo">

      <Avatar user={props.user} />

      <div className="UserInfo-name">

        {props.user.name}

      </div>

    </div>

  );

}

　　4）.替换UserInfo

function Comment(props) {

  return (

    <div className="Comment">

      <UserInfo user={props.author} />

      <div className="Comment-text">

        {props.text}

      </div>

      <div className="Comment-date">

        {formatDate(props.date)}

      </div>

    </div>

  );

}

5.Props 的只读性

　　组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

function sum(a, b) {

  return a + b;

}
这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

function withdraw(account, amount) {

  account.total -= amount;

}
这个函数则不是纯函数，因为它更改了自己的入参

React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

react学习笔记_03-组件&props的更多相关文章

【React】react学习笔记03-React组件对象的三大属性-state
今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...
React学习笔记(三) 组件传值
组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...
React学习笔记(二) 组件状态
组件的状态(this.state): 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI getIni ...
React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件 a.轻量组件-函 ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
React学习笔记（一）- 入门笔记
React入门指南作者:狐狸家的鱼本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
React学习笔记（七）条件渲染
React学习笔记(七) 六.条件渲染使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
React学习笔记（六）事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

随机推荐

CMS（1）
一周后,终于可以学习到可爱的渗透了哈哈哈.除了大哥给的CMS(其实可以算是只是在文件上传的时候了解一下),但是对于一个CMS完整的渗透思路,我还是不懂.首先感谢章老师给我的CMS源码哈哈哈,在我的日记 ...
smbspool - 将一个打印文件发送到一台SMB打印机
总览 SYNOPSIS smbspool {job} {user} {title} {copies} {options} [filename] 描述 DESCRIPTION 此程序是Samba(7)套 ...
javaweb各种框架组合案例(五)：springboot+mybatis+generator
一.介绍 1.springboot是spring项目的总结+整合当我们搭smm,ssh,ssjdbc等组合框架时,各种配置不胜其烦,不仅是配置问题,在添加各种依赖时也是让人头疼,关键有些jar包之间 ...
QT + openssl + VS2015静态编译
从http://slproweb.com/products/Win32OpenSSL.html下载已经编译好的openssl,一路next 我将OpenSSL-Win32\lib\VC目录下的libe ...
mongodb使用简介
mongodb简介在使用nodejs时候,需要存储一些简单json数据的情况下,很多人会推荐使用mongodb.mongodb是一个文档型数据库,在 sql 中,数据层级是:数据库(db) -> ...
如何防御DNS陷阱？黑客常用3种DNS欺骗手法
DNS如何被利用?那么这个系统如何让用户变得脆弱?通常解析器会告诉每个DNS服务器你正在寻找哪个域名.此请求有时会包含您的完整IP地址.或者,如果不是您的完整IP地址,请求中通常会包含您的大部分IP地 ...
python 时间和时间段显示
两个包,最开始发现的是time包 import time print(time.time()) #显示当前时间戳 print(time.localtime(time.time())) #显示本地时间 ...
python每日练习
""" 习题 1:一个列表,排重,不能用 set,也不能用字典 """ #方法一1:循环.遍历 l = [1,1,1,2,2,3,4,4,6 ...
JS中数据结构之散列表
散列是一种常用的数据存储技术,散列后的数据可以快速地插入或取用.散列使用的数据结构叫做散列表.在散列表上插入.删除和取用数据都非常快. 下面的散列表是基于数组进行设计的,数组的长度是预先设定的,如有 ...
keil c51 不能使用：Go to Definition of....的解决方法 STC51
keil c51 不能使用:Go to Definition of....的解决方法达到的目标如下图所示: 解决方法为 :在工程栏右键单击进入Manage Components ,然后点确定,前提是 ...

react学习笔记_03-组件&props

react学习笔记_03-组件&props的更多相关文章

随机推荐

热门专题