React组件化学习入门教程讲解

目录
  • 模块化
    • 模块
    • 模块化
  • 组件化
    • 组件
    • 组件化
  • 函数式组件
    • 创建函数组件
    • Props参数传递（重点）
    • 复合函数组件
  • 类式组件
    • 创建实例
    • 用户自定义组件

模块化

模块

理解：向外提供特定功能的js程序,一般就是一个js文件。

为什么：要拆成模块，随着业务逻辑增加,代码越来越多且复杂。

作用：复用js,简化js的编写,提高js运行效率。

模块化

当应用的js都以模块来编写,这个应用就是一个模块化的应用

组件化

组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)

为什么：要用组件，一个界面的功能复杂

作用：复用编码,简化项目编码,提高运行效率

组件化

当应用是以多组件的方式实现,这个应用就是组件化的应用

函数式组件

实质：一个 React 应用就是构建在 React 组件之上的。

函数组件：该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “​props​”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

创建函数组件

function HelloPerson(){
 return <h1>你好，我是函数式组件!</h1>;

}
ReactDOM.render(<HelloPerson/>,document.getElementById('root'));

说明：解析组件标签HelloPerson，发现组件是函数定义的，调用该函数，将返回的虚拟DOM，转为真实的DOM，随后呈现在页面上。

Props参数传递（重点）

function HelloPerson(person){
      console.log(this);//此处undefined babel编译后采取严格模式
  return (
  <ul>
  <li>姓名：{person.name}</li>
  <li>年龄：{person.age}</li>
  </ul>
  )
 }
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('root'));

复合函数组件

 function GetName(props){
 return <li>姓名：{props.name}</li>
 }
 function GetAge(props){
 return <li>年龄：{props.age}</li>
 }
function HelloPerson(person){
 return (
 <ul>
 <GetName name={person.name}/>
 <GetAge age={person.age}/>
 </ul>
  )
  }
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('root'));

类式组件

ES6 的 class 来定义组件，通过继承React.Component。解析流程如下：

React解析组件标签，找到了MyComponent组件。

发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。

将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

创建实例

//创建类组件 1:继承react中的Component类 2：需要render
class Person extends React.Component{
 render(){
 return (
     <h1>你好，我是类式组件！</h1>
 )
 }
}
ReactDOM.render(<Person/>,document.getElementById("root"));

用户自定义组件

const element = <Person/>
ReactDOM.render(element,document.getElementById("root"));

到此这篇关于React组件化学习入门教程讲解的文章就介绍到这了,更多相关React组件化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React中的生命周期和子组件

    目录 组件生命周期 创建创建期 获取虚拟DOM 子组件 组件生命周期 为了说明组件的创建,存在,销毁的过程,react提供了组件的生命周期,共分三大周期: 创建期:说明组件的创建的过程,相当于人的少年 存在期:说明组件的存在的过程,相当于人的中年 销毁期:说明组件的销毁的过程,相当于人的老年 创建创建期 创建期共分五个阶段: ES5开发中,对应五个方法:getDefaultProps,getInitialsate, ​​componentWillMount​​, ​​render​​, ​​co

  • 使用React组件编写温度显示器

    使用React组件编写温度显示器

    本文实例为大家分享了React组件编写温度显示器的具体代码,供大家参考,具体内容如下 这是模拟了一下温度显示器的效果,先看效果: 先在页面中引入React等: import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; // 页面的样式文件 开发过程是这样的: 首先定义一个BoillingVerdict组件,用来显示温度显示器的(样式先不写,

  • React组件实例三大属性state props refs使用详解

    React组件实例三大属性state props refs使用详解

    目录 一. State 1.概念 2.State的简单用法 3. JS绑定事件 4.react 绑定事件 5.react this指向问题 6.修改state值 7.代码简写 二.props 1.概念 2.传参的基础方法.运算符传参 三.refs 定义 字符串形式的ref.回调函数下ref.createRef 创建ref容器 一. State 1.概念 概念:state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合),组件被称为状态机,通过更新组件的state来更新对应的

  • React中父子组件通信详解

    目录 父组件向子组件通信 存在期 父组件向子组件通信 在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类 子组件是作为属性来接收这些数据的 第一类就是数据:变量,对象,属性数据,状态数据等等 这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式 注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种 作为事件回调函数执行 参数默

  • react组件中过渡动画的问题解决

    目录 一.是什么 二.如何实现 CSSTransition SwitchTransition TransitionGroup 一.是什么 在日常开发中,页面切换时的转场动画是比较基础的一个场景 当一个组件在显示与消失过程中存在过渡动画,可以很好的增加用户的体验 在react中实现过渡动画效果会有很多种选择,如react-transition-group,react-motion,Animated,以及原生的CSS都能完成切换动画 二.如何实现 在react中,react-transition-g

  • React组件化学习入门教程讲解

    目录 模块化 模块 模块化 组件化 组件 组件化 函数式组件 创建函数组件 Props参数传递(重点) 复合函数组件 类式组件 创建实例 用户自定义组件 模块化 模块 理解:向外提供特定功能的js程序,一般就是一个js文件. 为什么:要拆成模块,随着业务逻辑增加,代码越来越多且复杂. 作用:复用js,简化js的编写,提高js运行效率. 模块化 当应用的js都以模块来编写,这个应用就是一个模块化的应用 组件化 组件 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)

  • vue3.0 CLI - 2.6 - 组件的复用入门教程

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. ========================== 定义一个基础组件 这个基础组件,是导航条中 可以复用 的基础组件 单个导航. 基础组件[导航组件]基础的功能是能够显示文字,单击的交互方式.明确任务目标之后,进行开发. 在 component 目录下新建 Base 目录,Base 下新建文件 TopNav.vue.加入如下代码: <template> <div class="topnav&q

  • Java之jpa入门教程讲解

    JPA快速入门介绍 一:什么是JPA JPA的英文全称是Java PersistenceAPI, 目的是给Java开发者提供对象关系映射工具用于在 Java应用程序开发中来管理关系数据(RDBMS).JavaPersistence 包含下面三个部分: Java持久化API JPA查询语言 对象关系映射元数据 二:JPA有哪些框架提供了的实现 当前JPA提供厂商有Hibernate, Apache, Eclipse Link等,Google云计算平台 AppEngine也使 用了JPA作为持久层.

  • React组件化的一些额外知识点补充

    React组件化的一些额外知识点补充

    目录 React的额外补充 Portals的使用 Fragment的使用 严格模式StrictMode 总结 React的额外补充 Portals的使用 某些情况下,我们希望渲染的内容独立于父组件,甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM 元素上的). Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案: 第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment; 第二个参数(conta

  • 前端组件化基础知识详细讲解

    前端组件化基础知识详细讲解

    目录 组件的基本概念 对象与组件的区别 组件 Component 特性 Attribute Attribute 对比 Property Attribute: Property: Class 属性 Style 属性 Href 属性 Input 和 value 如何设计组件状态 组件生命周期 Lifecycle Children 结束语 这里我们一起来学习前端组件化的知识,而组件化在前端架构里面是最重要的一个部分. 讲到前端架构,其实前端架构中最热门的就有两个话题,一个就是组件化,另一个就是架构模式

  • JavaScript的React框架中的JSX语法学习入门教程

    什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和组件之间的关系看上去更加清晰. var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent som

  • Python画图学习入门教程

    本文实例讲述了Python画图的基本方法.分享给大家供大家参考,具体如下: Python:使用matplotlib绘制图表 python绘制图表的方法,有个强大的类库matplotlib,可以制作出高质量的2D和3D图形,先记录一下,以后慢慢学习. matplotlib下载及API手册地址:http://sourceforge.net/projects/matplotlib/files/matplotlib/ 数学库numpy下载及API手册地址:http://www.scipy.org/Dow

  • Python3爬虫学习入门教程

    Python3爬虫学习入门教程

    本文实例讲述了Python3爬虫相关入门知识.分享给大家供大家参考,具体如下: 在网上看到大多数爬虫教程都是Python2的,但Python3才是未来的趋势,许多初学者看了Python2的教程学Python3的话很难适应过来,毕竟Python2.x和Python3.x还是有很多区别的,一个系统的学习方法和路线非常重要,因此我在联系了一段时间之后,想写一下自己的学习过程,分享一下自己的学习经验,顺便也锻炼一下自己. 一.入门篇 这里是Python3的官方技术文档,在这里需要着重说一下,语言的技术文

  • PyTorch的深度学习入门教程之构建神经网络

    前言 本文参考PyTorch官网的教程,分为五个基本模块来介绍PyTorch.为了避免文章过长,这五个模块分别在五篇博文中介绍. Part3:使用PyTorch构建一个神经网络 神经网络可以使用touch.nn来构建.nn依赖于autograd来定义模型,并且对其求导.一个nn.Module包含网络的层(layers),同时forward(input)可以返回output. 这是一个简单的前馈网络.它接受输入,然后一层一层向前传播,最后输出一个结果. 训练神经网络的典型步骤如下: (1)  定义

  • Vue组件化学习之scoped详解

    Vue组件化学习之scoped详解

    目录 简介 总结 简介 主要介绍scoped的作用. 先弄一个案例: main.js: //引入vue依赖 import Vue from 'vue' //引入组件App import App from './App.vue' // 关闭生产提示 Vue.config.productionTip = false //创建一个vue实例 new Vue({ //这个目前还没学过,先知道他的作用是将app放入容器中. render: h => h(App), //配置该vue实例管理id为app的容

随机推荐