React基础与实战|青训营笔记

46 阅读2分钟

React特性与简介

特点:
声明式
组件化
跨平台编写

React基础之dangerouslySetInnerHTML 和 Child

--Child 1.React.Children 是顶层API之一,为处理 this.props.children 这个封闭的数据结构提供了有用的工具。

2.this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点。

React基础之PureComponent Component的2个问题 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低 只当前组件重新render(), 就会自动重新render子组件,纵使子组件没有用到父组件的任何数据 ==> 效率低 效率高的做法 只有当组件的state或props数据发生改变时才重新render()

·原因 Component中的shouldComponentUpdate()总是返回true

优缺点:

优点:
·快速响应:Fiber
·组件化:复用性强
·声明式编程
·跨平台:只需要修改渲染器 缺点: · 大型应用需要配套学习状态管理、路由工具
· 不适合小型应用,需要用babel处理

hook 规则和原理

只能在最顶层使用hook
只能在React函数中调用Hook {·在React函数组件中或自定义Hook中调用 ·自定义Hook必须以use开头 · Hook中的state是完全隔离的 }

逻辑复用_useRequest 案例

通过对案例的实战与分析深入展现了React的实际用法和使用效果。

注意

·React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是唯一的 ·因为ref很消耗内存, 所以不要过度使用ref! 不要过度使用ref! 不要过度使用ref! ·PureComponent的注意点: 1) 只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false 2) 不要直接修改state数据, 而是要产生新数据

总结

这次课程给我带来了全新的了解,让我对前端知识有了更近一步的了解。