网站建设和维护工作内容吉林哪里做网站

当前位置： 首页 > news >正文

网站建设和维护工作内容,吉林哪里做网站,wordpress xml-rpc,网站开发w亿玛酷1订制大家好#xff0c;我是有用就点赞#xff0c;有用就扩散。 1.React的组件间通信都有哪些形式#xff1f; 父传子#xff1a;在React中#xff0c;父组件调用子组件时可以将要传递给子组件的数据添加在子组件的属性中#xff0c;在子组件中通过props属性进行接收。这个就…大家好我是有用就点赞有用就扩散。 1.React的组件间通信都有哪些形式 父传子在React中父组件调用子组件时可以将要传递给子组件的数据添加在子组件的属性中在子组件中通过props属性进行接收。这个就是父组件向子组件通信。子传父React是单向数据流数据永远只能自上向下进行传递。当子组件中有些数据需要向父级进行通信时需要在父级中定义好回调将回调传递给子组件子组件调用父级传递过来的回调方法进行通信。跨组件通信context。使用context API可以在组件中向子孙级组件进行信息传递。 2.React中如何实现路由懒加载 在React16中新增了lazy方法通过lazy方法可以轻松实现组件懒加载当然要实现路由懒加载的话其实也只需要把路由组件结合lazy使用即可。 在下述代码中我们使用lazy引入了一个动态组件然后将该组件放入了根路由中这样的话只有用户访问网站首页时才会动态加载这个组件。 注意事项在React规范中lazy和Suspense必须配合使用lazy引入的动态组件必须要放入Suspense中Suspense的fallback属性是lazy的组件没有加载进来之前的占位内容。 import {Route} from react-router-dom import React,{Suspense} from react const HomeView React.lazy(()import(./home)) const App () {return (divh1路由懒加载/h1Route path/ exact render{(){return (Suspense fallback{div组件Loading进来之前的占位内容/div}HomeView//Suspense)}} //div) } export default App3.React的生命周期函数都有哪些分别有什么作用 React的生命周期已经历经了3次改动我们以最新的版本为准。 在16.3版本之前constructor初始化之后是使用到是componentDidMount这个生命周期。 在16.3版本后面发现componentDidMount这个函数有没有都没有区别添加了getDerivedStateFromProps函数影响的是挂载时和父组件更新时的生命周期函数。 16.4版本之后getDeriveStateFromProps函数影响的是挂载时和父组件和本身组件更新时的生命周期函数。 挂载阶段 constructor初始化组件初始化组件的state等。static getDerivedStateFromProps()该函数用于将props中的信息映射到state中。render生成虚拟DOM。componentDidMount组件挂载完成通过在该函数中去处理副作用。 更新阶段 static getDerivedStateFromProps()shouldComponentUpdate()该生命周期函数用于判断是否要进行组件更新。render()生成虚拟DOMgetSnapshotBeforeUpdate()组件已经完成diff即将更新真实DOM用户获取上一次的DOM快照。该函数必须搭配componentDidUpdate一块使用返回值会变成componentDidUpdate第三个参数。componentDidUpdate()组件更新完成通常在该函数中进行副作用处理。 即将卸载 compoentWillUnmount组件即将卸载用于删除组件添加到全局的数据或事件。 4.说一下React Hooks在平时开发中需要注意的问题和原因 React Hooks在使用时注意事项 只能在React函数中使用函数式组件或自定义hook。只能在函数最外层调用hook不能包括在iffor等语句中或者子函数中。useState中存储的是引用类型的数据时修改state时一定要返回新的引用。 原因 Hooks专为函数组件的逻辑复用而设计所以只能用在函数式组件和自定义hooks。hooks在调用的时候需要确保先后调用顺序一个顺序出问题会导致整个程序的混乱。如果在useState中存储的是引用类型更新时不更引用地址时的话React会认为我们没有更新数据则不进行组件更新。 5.setState是同步还是异步 React可以检测到的时候是异步React检测不到时是同步 源码相关的方法batch updater 监听的主要是isBatchUpdater true 在批量更新机制下会检测到所以这个时候setState是异步的或者其他React自带函数使用的时候会检测到。 使用setTimeout或者在使用生命周期的时候使用事件此时的isBatchUpdater会原来的true变成false所以这个时候setState是同步的。 6.React逻辑复用 复用的4种方式 直接把相同的代码复制一份到需要使用的组件种非常low的方式 创建一个高阶组件将复用的组件存放到高阶组件中需要使用的组件直接复用 高阶组件HOC的注意事项 1不要在render方法内使用高阶组件因为每次高阶组件返回的都是不同的组件会造成不必要的渲染 2必须将静态方法做拷贝 HOC带来的问题 1当存在多个HOC时不知道props是从哪里来 2和Mixin一样存在相同名称的props则存在覆盖问题而且react并不会报错 3JSX层次中多了很多层次即无用的空组件不利于调试 4HOC属于静态构建静态构建即是重新生成一个组件即返回的新组件不会马上渲染即新组件中定义的生命周期函数只有新组件被渲染时才会执行。 使用render函数使组件达到复用 使用自定义hooks 1自定义hook可以在不增加组件的情况下达到同样的目的 2hook是一种复用的状态逻辑的方式它不复用state本身 3事实上hook的每次调用都有一个完全独立的state 4自定义hook更像是一种约定而不是一种功能。如果函数的名字以use开头并且调用了其他的hook则就称其为一个自定义hook 7.在React中针对类组件和函数组件分别怎么去进行性能优化 在类组件中可以使用shouldComponentUpdate或者PureComponent在函数组件中则可以使用memo引用类型的时候在包裹一层 8.请结合React Router实现React项目的路由守卫 React实现路由拦截的基本思路还是利用Route的render函数通过判断拦截条件来实现不同的组件的跳转从而实现拦截 9.是否使用过React Portals在什么场景下使用 Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案。 场景 一个Portal的典型用例是当父组件有overflowhidden或z-index样式时需要子组件能够在视觉上“跳出”其容器。例如对话框、悬浮卡以及提示框 10.在函数组件中如何获取组件更新前的state 可以利用useRef保存state当useRef存储的是数据数据不会随着组件的更新而自动更新要想获取组件更新前的state在useEffect里面监听state的变化从而把之前的state赋值给useRef定义的数据达到获取组件更新前的state。 关于各位大哥投稿PR。