猿创征文|【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"));


相关文章
|
9天前
|
前端开发 API UED
怎么学习React 18 进行项目开发?
【4月更文挑战第18天】学习React 18涉及新特性如并发模式、Suspense API和自动批处理更新,可提升性能和用户体验。首先了解这些新特性,然后掌握React基础知识,如组件化、JSX、props和state。使用Create React App创建项目,学习如何启用并发模式和使用Suspense显示占位符。实现自定义组件,关注props传递、状态管理和事件处理。通过Profiler优化性能,利用懒加载和代码分割减少加载时间,使用Context API共享状态。不断实践和探索,参考官方文档与社区资源,以提高开发技能。
103 3
|
9天前
|
前端开发 JavaScript API
如何学习react
【4月更文挑战第9天】 学习React前,需掌握JavaScript基础,了解React的JSX、组件、props、state和生命周期等概念。安装Node.js和npm,用Create React App搭建环境。学习核心API,如React.createElement、React.render等,并阅读官方文档。实践项目,从Todo List开始,逐渐挑战复杂应用。同时,学习相关技术如Redux、React Router,并参与社区交流,持续关注React新发展。持之以恒,祝学习顺利!
29 10
|
9天前
|
前端开发 JavaScript
react学习(Effect)
react学习(Effect)
25 3
|
9天前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
30 0
|
9天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
9天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
9天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
9天前
|
前端开发 JavaScript 索引
快速掌握 React 基础入门: 一个完整的指南(三)
快速掌握 React 基础入门: 一个完整的指南
|
9天前
|
前端开发 JavaScript
快速掌握 React 基础入门: 一个完整的指南(二)
快速掌握 React 基础入门: 一个完整的指南
|
9天前
|
前端开发 JavaScript Linux
快速掌握 React 基础入门: 一个完整的指南(一)
快速掌握 React 基础入门: 一个完整的指南

热门文章

最新文章