一:React核心概念
React的特点
声明式编程:开发描述出UI呈现的数据和状态,React负责确保UI与数据状态保存同步。 组件化、虚拟DOM、 单向数据流:父组件到子组件的数据传递,通过props实现。 支持服务端渲染
JSX本质
JSX是语法糖,通过Babel编译为React.createElement调用,最终生成React元素。 浏览器无法直接读取JSX? JSX本质上是javascript的语法糖。不是有效的javascript代码。
React Hooks的闭包陷阱
- 使用useEffect时,会出现闭包陷阱,因为useEffect钩子函数第二个参数传值对传入回调执行的影响
- useEffect第二个参数不传,或传入undefined\null,则每次都会执行
- 传入一个空数组,仅第一次渲染时执行
- 传入其他依赖项,会对比数组中的每个元素是否改变,决定是否重新执行
- 解决方法:
- 添加依赖项
- useRef
React中的严格模式(StrictMode)?
严格模式只在开发环境下生效,当执行打包命令也就是生产环境下时,StrictMode会被去除。
React.StrictMode本身就是一个组件,该组件包含的子组件就会在开发环境下开启严格模式。
// index.js
const root = ReactDOM.createRoot(documnet.getElementById('root'))
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
)
StrictMode的作用:
React.Fragment语法(<>...</>)的作用
在React中,组件必须返回单个根元素。Fragments可以聚合一个子元素列表,不在DOM中增加额外节点。