ReactJS实战之组件和Props详解

向外暴露组件，需要配置识别文件后缀名哦

定义组件

===================================================================

函数定义组件

---

定义一个组件最简单的方式是使用JavaScript函数

该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。

之所以称这种类型的组件为函数定义组件，是因为从代码来看，它就是一个js函数。

类定义组件

---

也可使用 ES6 的 class 来定义一个组件

上面两个组件在React中是相同的。

注意，在类中定义组件时，必须定义一个 render 函数

• 否咋报错

No render method found on the returned component instance: you may have forgotten to define render.

render 函数还必须有返回值

• 否咋报错

Uncaught Invariant Violation: Index.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

const me = {

name: ‘JavaEdge’,

age: “18”,

gender: ‘boy’

}

ReactDOM.render(

{/这里的 Index 标签，就是 Index 类的一个实例对象/}

{/这里就是外界传来的 me，可用 props 访问/}

<Index {…me}>

, document.getElementById('example'));

class Index extends React.Component {

render() {

return (

{/不同于function，如果想使用外界传过来的 props 参数，无需接收，直接访问 this.props.xxx 即可,注意加上大括号，当做 js 执行，而非字符串/}

这是 Index 组件 — {this.props.name} – {this.props.age}

);

}

}

对比

---

“无状态组件”（用得少）

用构造函数创建出来的组件。使用function创建的组件，只有props, 没有自己的私有数据和生命周期函数。

“有状态组件”（使用最多）

用class关键宇创建出来的组件。使用class关键字创建的组件,有自己的私有数据(this.state) 和生命周期函数。如果一个组件需要有自己的私有数据时使用。

• 有状态、无状态组件的本质区别

有无state属性

组件中的props 和 state/data之间的区别

---

• props中的数据都是外界传递过来的

• state/data中的数据，都是组件私有的; (通过Ajax获取回来的数据，-般都是私有数据)

• props 中的数据都是只读的;不能重新赋值

• state/data中的数据，都是可读可写的

组件渲染

===================================================================

• 在前面，我们遇到的React元素都只是DOM标签

• React元素也可以是用户自定义的组件

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为props

例如,这段代码会在页面上渲染出”Hello,sss”

我们来回顾一下在这个例子中发生了什么：

• 我们对<Welcome name="sss" />元素调用了ReactDOM.render()

• React将{name: 'sss'}作为props传入并调用Welcome组件

• Welcome组件将<h1>Hello, sss</h1>元素作为结果返回。

• React DOM将DOM更新为

Hello, sss

==========

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

例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入之

组合组件

===================================================================

组件可以在它的输出中引用其它组件，这就可以让我们用同一组件来抽象出任意层次的细节

在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件

例如，我们可以创建一个App组件，用来多次渲染Welcome组件

通常，一个新的React应用程序的顶部是一个App组件

但是，如果要将React集成到现有应用程序中，则可以从下而上使用像Button这样的小组件作为开始，并逐渐运用到视图层的顶部

警告:

组件的返回值只能有一个根元素

这也是要用一个<div>来包裹所有<Welcome />元素的原因

提取组件

===================================================================

你可以将组件切分为更小的组件，这没什么好担心的。

例如，来看看这个Comment组件：

这个组件接收author(对象)、text(字符串)、以及date(Date对象)作为props，用来描述一个社交媒体网站上的评论

这个组件由于嵌套，变得难以被修改，可复用的部分也难以被复用

所以让我们从这个组件中提取出一些小组件

• 首先，我们来提取Avatar组件：

Avatar作为Comment的内部组件，不需要知道是否被渲染

因此我们将author改为一个更通用的名字user

建议从组件自身的角度来命名props，而不是根据使用组件的上下文命名

现在我们可以对Comment组件做一些小小的调整

接下来，我们要提取一个UserInfo组件，用来渲染Avatar旁边的用户名

这可以让我们进一步简化Comment组件
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注Java获取）

总结

至此，文章终于到了尾声。总结一下，我们谈论了简历制作过程中需要注意的以下三个部分，并分别给出了一些建议：

1. 技术能力：先写岗位所需能力，再写加分能力，不要写无关能力；
2. 项目经历：只写明星项目，描述遵循 STAR 法则；
3. 简历印象：简历遵循三大原则：清晰，简短，必要，要有的放矢，不要海投；

以及最后为大家准备的福利时间：简历模板+Java面试题+热门技术系列教程视频

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门即可获取！
项目经历：只写明星项目，描述遵循 STAR 法则；
3. 简历印象：简历遵循三大原则：清晰，简短，必要，要有的放矢，不要海投；

以及最后为大家准备的福利时间：简历模板+Java面试题+热门技术系列教程视频

[外链图片转存中…(img-bWhPUw1a-1711807297570)]

[外链图片转存中…(img-6PYo05v4-1711807297570)]

[外链图片转存中…(img-pP4OETlT-1711807297570)]

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门即可获取！