深入理解React之JSX和React组件(三)

·  阅读 58

Offer 驾到,掘友接招!我正在参与2022春招打卡活动,点击查看活动详情

三、深入理解React之JSX和React组件

1)、JSX的优势和局限

1、把相关的code放到一起,好维护,这样就是一个单独的组件所必须的。
2、render函数是一个纯函数,没有做渲染的事情,它只不过就是返回了一些指令,然后通过这些指令由React通过DOM或者虚拟DOM来进行操作,所以react返回的结果都是通过 React.createElement产生的结果

3、jsx中的{}中只能是一个表达式,不能是一个语句,因为jsx可以通过babel转换成React.createElement的形式进行渲染,但是React.createElement中的参数只能是一个表达式,不能是一个语句(比如for循环、if判断等),同时jsx中的render函数的{}中不能使用push()reverse()等数组方法,因为render应该是一个纯函数,纯函数不应该有副作用,渲染的应该是state或者props,如果使用了push()reverse()等数组方法,那么就会直接修改state或者props里面的数据,而并不是产生新的数据

2)、什么使用props什么时候使用state

在react中data包括:satae和props,props是从外部的组件中传过来的数据,而satae是组件内部状态,一个组件的自己的satae可以作为传递给它子组件的props的数据来源,一个组件想要改变自己的状态只能通过setState来进行改变自己的状态,一个组件不能够直接通过修改自己的props来改变自己的更新状态,也不能修改自己的porps,因为修改自己的props会很乱的。但凡props能够搞定的事情,尽量不要使用state。

将父级所传递的props,作为子级的state,是会产生值引用对象影响问题,也就是我更改子级state,父级props被相应更改

3)、详解React组件的生命周期

React组件的生命周期三种过程:

  • mount:从无到有的过程
  • update: 重新渲染,又分为state change引发的,和props引发的
  • unmount:从有到无

mount过程: getDefaultProps getInitialState componentWillMount render componentDidMount:这个函数只能在浏览器端执行,但是使用react做服务器端渲染的时候,不能在服务器端执行(因为在服务器端突出出来的是一个字符串,根本上就没有一个DOM-tree被mount的说法,所以不会执行),

因state改变引发的update过程:

shouldComponentUpdate componentWillUpdate render componentDidUpdate

因父组件想要render这个组件改变引发的update过程:

componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate

如果当父组件不需要重新渲染,shouldComponentUpdate 会 返回一个false,那样后面的componentWillUpdate、render、componentDidUpdate 就不会执行。

无论是mount过程还是update过程中的render函数之前的声明周期,获取的到的state或者是props都是之前未改变的数据,只有render函数之后,才是数据改变之后的状态,

4)、为什么尽量构建无状态组件

无状态组件就是一个纯函数,尽量让组件成为一个纯函数形式的无状态组件,因为可以减少一些bug出现,我们应该把一些有状态组件(就是里面含有state)集中起来进行管理,让其子组件是一个无状态组件,这样好管理,好维护,

5)、创建高阶组件(HoC,Higher-Order Component)

HoC 高阶组件使用场景

把一个通用的功能,使用高阶组件进行共用,这样就不必写同样的功能代码了。

6)、组件之间通讯

父组件通过属性的形式向子组件传递参数,子组件通过props接受父组件传递过来的参数

子组件如果想和父组件通信,子组件要调用父组件传递过来的方法

兄弟组件之间的通讯可以借助于父组件作为中介,进行传递数据(父组件中写两个函数,这两个函数分别传给两个子组件,然后互相之间进行相互引用,)

任意组件之间的通讯可以通过设置一个全局变量来作为中介,进行传递数据。

如果这个项目比较打的话,当然也可以使用redux进行组件之间的通讯。


\

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改