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

更新时间：2022年09月10日 10:04:51 作者：小余努力搬砖

React是现在前端使用频率最高的三大框架之一，React率先提出虚拟DOM的思想和实现，使其保持有良好的性能。本篇文章将对React组件化的入门学习进行讲解，同时针对模块化的思想进行概述，为接下来组件化开发的文章进行知识储备

模块化

模块

理解：向外提供特定功能的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组件化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React Native中导航组件react-navigation跨tab路由处理详解
这篇文章主要给大家介绍了关于React Native中导航组件react-navigation跨tab路由处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-10-10
一文详解React类组件中的refs属性
react中的ref类似于vue中的ref,都是可以操作dom的,这篇文章我们通过一个demo来学习这个属性,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
2023-08-08
Rust中Trait的使用
在Rust中,Trait是一个核心概念,它允许我们定义类型应该具有的行为,本文就来具体介绍一下Rust中Trait的使用,感兴趣的可以了解一下,感兴趣可以了解一下
2024-03-03
useState 解决文本框无法输入的问题详解
这篇文章主要为大家介绍了useState 解决文本框无法输入的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
解决React报错Expected `onClick` listener to be a function
这篇文章主要为大家介绍了React报错Expected `onClick` listener to be a function解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
解决React报错React Hook useEffect has a missing dependency
这篇文章主要为大家介绍了解决React报错React Hook useEffect has a missing dependency，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React在Dva项目中创建并引用页面局部组件的方式
这篇文章主要介绍了React在Dva项目中创建并引用页面局部组件的方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
React创建对话框组件的方法实例
在项目开发过程中,对于复杂的业务选择功能很常见,下面这篇文章主要给大家介绍了关于React创建对话框组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
react 不用插件实现数字滚动的效果示例
这篇文章主要介绍了react 不用插件实现数字滚动的效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Hello React的组件化方式之React入门小案例演示
这篇文章主要介绍了Hello React的组件化方式-React入门小案例,本文通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法，需要的朋友可以参考下
2022-10-10