React Tips-2

最新推荐文章于 2024-11-25 15:32:37 发布

LeonardoRain

最新推荐文章于 2024-11-25 15:32:37 发布

阅读量178

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React redux 文章标签： react redux

本文链接：https://blog.youkuaiyun.com/qq_39519224/article/details/96344881

React 同时被 2 个专栏收录

3 篇文章

订阅专栏

redux

2 篇文章

订阅专栏

本文深入讲解React的关键概念，包括JSX注释、样式处理、虚拟DOM原理及其优化策略、生命周期函数的应用，以及如何利用Redux、Redux-thunk和Redux-saga进行高效的状态管理和异步操作处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 关于JSX注释方式：

第一种：{/*这是一行注释*/}
第二种：{
            //这是一行注释
        }

2. 在React的JSX中去使用样式对应的class作类名时为了避免混淆，需要使用className来代替class作为一个标签或者组件的类属性。

3. 在React中如果要在<label></label>标签上加上for属性时为了避免混淆，需要使用htmlFor来代替，例如<label htmlFor="insertArea">输入内容</label> （在label标签上加for属性是为了对id等于insertArea的输入框有更大的点击区域来进行光标聚焦）

4. React具有单项数据流的特性，子组件只能读取父组件传来的数据不能修改。

5. PropTypes进行传值的类型校验，DefaultTypes进行参数的默认值定义
官方文档详解：
https://react.docschina.org/docs/typechecking-with-proptypes.html

6. render函数的执行：
• 当组件的state或者props发生改变时render函数就会被重新执行
• 当父组件的render函数被运行时，它的子组件的render函数都将被重新运行

7. React中的虚拟DOM：本质上是一个JS对象，提供性能的原因是JS中比较JS对象不怎么消耗性能，而直接比较DOM很耗性能。
转换的过程：JSX --> createElement --> 虚拟DOM（JS对象）--> 真实的DOM

下图是React的虚拟DOM原理：

8. 虚拟DOM中的Diff算法
   • setState在底层中可以把间隔时间较短的多次setState合成一次setState，来减少虚拟DOM比对的次数。
   • Diff算法比对两个虚拟DOM差异的时候，会逐层的比对，如果一层不满足的比对的要求时候，那么下面的就不会再比对了，下面的直接废弃掉，用新的替换旧的，这样会提升性能。
   • React中进行列表比对的时候使用key值用来提升性能，尽量不要使用index作为key值（因为index作为key值是不稳定的）。

9. 生命周期函数：指在某一个时刻，组件会自动调用执行的函数

   • componentWillMount（）函数在组件即将被挂载到页面的时刻自动执行
   • componentDidMount（）函数在组件被挂载到页面之后自动执行
   以上两个函数只在组件挂载（组件第一次被放在页面上）的时候被执行
   • shouldComponentUpdate（）函数在组件被更新之前，会自动执行
   • componentWillUpdate（）函数在组件被更新之前，会自动执行，但是它在shouldComponentUpdate之后执行，如果shuldComponentUpdate返回true，它才执行，如果返回false，它就不会被执行了。
   • componentDidUpdate（）函数在组件更新之后被执行。
   • componentWillReceiveProps（）函数，一个组件要从父组件接收参数，如果这个组件第一次存在于父组件中，不会执行，如果这个组件之前已经存在于父组件中，才会执行。
   • componentWillUnmount（）函数，当这个组件即将被从页面中剔除的时候，会被执行。

10. Redux
   • Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。Redux 除了和 React 一起用外，还支持其它界面库。它体小精悍（只有2kB，包括依赖）。
Redux = Reducer + Flux

11. 无状态组件
   • 当组件只有一个render()函数的时候，可以只返回一个函数，不需要再定义class类了，我们就可以用一个无状态组件来定义这个组件。其实无状态组件就是一个函数，同时这个函数会接收一个props，也就是父组件传递过来的内容，此时可以直接用props而不是this.props。由于普通的组件不仅要执行生命周期函数还要执行render(),而无状态组件只需要执行本函数就可以了，所以使用无状态组件可以提高性能。
   • 一般来说，UI组件可以用无状态组件。

12. Redux-thunk中间件
   • redux-thunk是在 action 和 store 中间的一个中间件，它实际上就是做了一个对dispatch函数的封装和升级，最原始的dispatch函数在接收到一个对象之后会把这个对象传递给store，而通过redux-thunk升级的dispatch函数会根据接收不同而执行不同的操作，如果接收到一个对象，那就直接把这对象传递给store，如果接收到一个函数，那就先执行这个函数，之后需要调用store的时候再调用store。
   • 使用redux-thunk的目的是可以在action里去写异步的代码【之前的action只能是一个对象，而使用了redux-thunk中间件之后，action也可以是一个函数了，可以使用store.dispatch（action）把这个函数发送给store了。之后store会自动执行这一段函数，而这一段函数对应的内容定义在actionCreators中，它返回一个axios请求，先取json的数据，然后获取数据，接下来继续走redux的流程 <先创建一个action调用initListAction，然后调用store.dispatch方法，其中的store.dispatch方法通过return（dispatch）接收到dispatch方法，故而直接使用dispatcch(action)即可> 来改变store的数据】
   • 使用redux-thunk的好处：如果把异步函数放在组件的生命周期函数中去写，这个生命周期函数可能会变得越来越复杂，组件会变得越来越大。所以借助redux-thunk来把这些复杂的业务逻辑或者异步函数拆分到一个地方去管理，带来的好处就是当去做自动化测试的时候会很简单。

   整个流程：ui组件触发action创建函数 ---> action创建函数返回一个action ------> action被传入redux中间件(被 saga等中间件处理) ，产生新的action，传入reducer-------> reducer把数据传给ui组件显示 -----> mapStateToProps ------> ui组件显示

13. Redux-saga中间件（https://www.jianshu.com/p/6f96bdaaea22）
   • 概述：redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。
   • 这意味着应用的逻辑会存在两个地方
   (1) reducer负责处理action的stage更新
   (2) sagas负责协调那些复杂或者异步的操作
   • sagas是通过generator函数来创建的
   • sagas可以被看作是在后台运行的进程。sagas监听发起的action，然后决定基于这个action来做什么 (比如：是发起一个异步请求，还是发起其他的action到store，还是调用其他的sagas 等 )
   • 在redux-saga的世界里，所有的任务都通过用 yield Effects 来完成 ( effect可以看作是redux-saga的任务单元 )
   • Effects 都是简单的 javascript对象，包含了要被 saga middleware 执行的信息
   • redux-saga 为各项任务提供了各种（ Effects创建器 )
   • 因为使用了generator函数，redux-saga让你可以用同步的方式来写异步代码
   • redux-saga启动的任务可以在任何时候通过手动来取消，也可以把任务和其他的Effects放到 race 方法里以自动取消