ReactJS实战之组件和Props详解(下)

简介: 组件可以将UI切分成一些独立的、可复用的部件,这样就只需专注于构建每一个单独的部件。 组件从概念上看就像是函数,它可以接收任意的输入值(称之为props),并返回一个需要在页面上展示的React元素。

提取组件

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

例如,来看看这个Comment组件:

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


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

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

  • 首先,我们来提取Avatar组件:

image.png

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

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

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

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

1.png

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

image.png这可以让我们进一步简化Comment组件

1.png

提取组件一开始看起来像是一项单调乏味的工作,但是在大型应用中,构建可复用的组件完全是值得的

当你的UI中有一部分重复使用了好几次(比如,Button、Panel、Avatar),或者其自身就足够复杂(比如,App、FeedStory、Comment),类似这些都是抽象成一个可复用组件的绝佳选择,这也是一个比较好的做法


Props的只读性

无论是使用函数或是类来声明一个组件,它决不能修改它自己的props。

  • 来看这个sum函数

image.png

类似于上面的这种函数称为“纯函数”,它没有改变它自己的输入值,当传入的值相同时,总是会返回相同的结果


与之相对的是非纯函数,它会改变它自身的输入值

image.png

React是非常灵活的,但它也有一个严格的规则:


所有的React组件必须像纯函数那样使用它们的props


当然,应用的界面是随时间动态变化的,State可以在不违反上述规则的情况下,根据用户操作、网络响应、或者其他状态变化,使组件动态的响应并改变组件的输出。


  • function形式

1.png

image.png

es6形式

1.png

image.png

属性

state属性

存储组件自身需要的数据。可读可写,它的每次改变都会引发组件的更新。

每次数据的更新都是通过修改 state 属性的值,然后 ReactJS 内部会监听 state 属性的变化,一旦发生变化,就会触发组件的 render 方法来更新 DOM 结构。

props属性

props 是一个对象,是组件用来接收外面传来的参数的。

组件内部是不允许修改自己的 props 属性,只能通过父组件来修改。上面的 getDefaultProps 方法便是处理 props 的默认值。

1.png



目录
相关文章
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
95 0
|
3月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
31 0
|
3月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
34 0
|
3月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
30 0
|
3月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
28 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
40 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
15 1
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
21 0
|
2月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
3月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
74 1