营销型企业网站,做网站 图文教程,网片机,wordpress 首页显示图片hooks 为什么不能放在条件判断里
以 setState 为例#xff0c;在 react 内部#xff0c;每个组件(Fiber)的 hooks 都是以链表的形式存在 memoizeState 属性中 update 阶段#xff0c;每次调用 setState#xff0c;链表就会执行 next 向后移动一步。如果将 setState 写在条…hooks 为什么不能放在条件判断里
以 setState 为例在 react 内部每个组件(Fiber)的 hooks 都是以链表的形式存在 memoizeState 属性中 update 阶段每次调用 setState链表就会执行 next 向后移动一步。如果将 setState 写在条件判断中假设条件判断不成立没有执行里面的 setState 方法会导致接下来所有的 setState 的取值出现偏移从而导致异常发生。 React 高阶组件、Render props、hooks 有什么区别为什么要不断迭代
这三者是目前react解决代码复用的主要方式
高阶组件HOC是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分它是一种基于 React 的组合特性而形成的设计模式。具体而言高阶组件是参数为组件返回值为新组件的函数。render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术更具体的说render prop 是一个用于告知组件需要渲染什么内容的函数 prop。通常render props 和高阶组件只渲染一个子节点。让 Hook 来服务这个使用场景更加简单。这两种模式仍有用武之地例如一个虚拟滚动条组件或许会有一个 renderltem 属性或是一个可见的容器组件或许会有它自己的 DOM 结构。但在大部分场景下Hook 足够了并且能够帮助减少嵌套。
1HOC 官方解释∶ 高阶组件HOC是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分它是一种基于 React 的组合特性而形成的设计模式。 简言之HOC是一种组件的设计模式HOC接受一个组件和额外的参数如果需要返回一个新的组件。HOC 是纯函数没有副作用。
// hoc的定义
function withSubscription(WrappedComponent, selectData) {return class extends React.Component {constructor(props) {super(props);this.state {data: selectData(DataSource, props)};}// 一些通用的逻辑处理render() {// ... 并使用新数据渲染被包装的组件!return WrappedComponent data{this.state.data} {...this.props} /;}};// 使用
const BlogPostWithSubscription withSubscription(BlogPost,(DataSource, props) DataSource.getBlogPost(props.id));
HOC的优缺点∶
优点∶ 逻辑服用、不影响被包裹组件的内部逻辑。缺点∶ hoc传递给被包裹组件的props容易和被包裹后的组件重名进而被覆盖
2Render props 官方解释∶ render prop是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术 具有render prop 的组件接受一个返回React元素的函数将render的渲染逻辑注入到组件内部。在这里render的命名可以是任何其他有效的标识符。
// DataProvider组件内部的渲染逻辑如下
class DataProvider extends React.Components {state {name: Tom}render() {return (divp共享数据组件自己内部的渲染逻辑/p{ this.props.render(this.state) } /div);}
}// 调用方式
DataProvider render{data (h1Hello {data.name}/h1
)}/
由此可以看到render props的优缺点也很明显∶
优点数据共享、代码复用将组件内的state作为props传递给调用者将渲染逻辑交给调用者。缺点无法在 return 语句外访问数据、嵌套写法不够优雅
3Hooks 官方解释∶ Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过自定义hook可以复用代码逻辑。 // 自定义一个获取订阅数据的hook
function useSubscription() {const data DataSource.getComments();return [data];
}
//
function CommentList(props) {const {data} props;const [subData] useSubscription();...
}
// 使用
CommentList datahello /
以上可以看出hook解决了hoc的prop覆盖的问题同时使用的方式解决了render props的嵌套地狱的问题。hook的优点如下∶
使用直观解决hoc的prop 重名问题解决render props 因共享数据 而出现嵌套地狱的问题能在return之外使用数据的问题。
需要注意的是hook只能在组件顶层使用不可在分支语句中使用。、
React中可以在render访问refs吗为什么
span idname ref{this.spanRef}{this.state.title}/spanspan{ this.spanRef.current ? 有值 : 无值 }/span
/
不可以render 阶段 DOM 还没有生成无法获取 DOM。DOM 的获取需要在 pre-commit 阶段和 commit 阶段
Component, Element, Instance 之间有什么区别和联系
元素 一个元素element是一个普通对象(plain object)描述了对于一个DOM节点或者其他组件component你想让它在屏幕上呈现成什么样子。元素element可以在它的属性props中包含其他元素(译注:用于形成元素树)。创建一个React元素element成本很低。元素element创建之后是不可变的。组件 一个组件component可以通过多种方式声明。可以是带有一个render()方法的类简单点也可以定义为一个函数。这两种情况下它都把属性props作为输入把返回的一棵元素树作为输出。实例 一个实例instance是你在所写的组件类component class中使用关键字this所指向的东西(译注:组件实例)。它用来存储本地状态和响应生命周期事件很有用。
函数式组件(Functional component)根本没有实例instance。类组件(Class component)有实例instance但是永远也不需要直接创建一个组件的实例因为React帮我们做了这些。
state 和 props 区别是啥
state 是组件自己管理数据控制自己的状态可变props 是外部传入的数据参数不可变没有state的叫做无状态组件有state的叫做有状态组件多用 props少用 state也就是多写无状态组件。
React中发起网络请求应该在哪个生命周期中进行为什么
对于异步请求最好放在componentDidMount中去操作对于同步的状态改变可以放在componentWillMount中一般用的比较少。
如果认为在componentWillMount里发起请求能提早获得结果这种想法其实是错误的通常componentWillMount比componentDidMount早不了多少微秒网络上任何一点延迟这一点差异都可忽略不计。
react的生命周期 constructor() - componentWillMount() - render() - componentDidMount()
上面这些方法的调用是有次序的由上而下依次调用。
constructor被调用是在组件准备要挂载的最开始此时组件尚未挂载到网页上。componentWillMount方法的调用在constructor之后在render之前在这方法里的代码调用setState方法不会触发重新render所以它一般不会用来作加载数据之用。componentDidMount方法中的代码是在组件已经完全挂载到网页上才会调用被执行所以可以保证数据的加载。此外在这方法中调用setState方法会触发重新渲染。所以官方设计这个方法就是用来加载外部数据用的或处理其他的副作用代码。与组件上的数据无关的加载也可以在constructor里做但constructor是做组件state初绐化工作并不是做加载数据这工作的constructor里也不能setState还有加载的时间太长或者出错页面就无法加载出来。所以有副作用的代码都会集中在componentDidMount方法里。
总结
跟服务器端渲染同构有关系如果在componentWillMount里面获取数据fetch data会执行两次一次在服务器端一次在客户端。在componentDidMount中可以解决这个问题componentWillMount同样也会render两次。在componentWillMount中fetch data数据一定在render后才能到达如果忘记了设置初始状态用户体验不好。react16.0以后componentWillMount可能会被执行多次。
参考 前端进阶面试题详细解答
如何解决 props 层级过深的问题
使用Context API提供一种组件之间的状态共享而不必通过显式组件树逐层传递props使用Redux等状态库。
对React SSR的理解
服务端渲染是数据与模版组成的html即 HTML 数据 模版。将组件或页面通过服务器生成html字符串再发送到浏览器最后将静态标记混合为客户端上完全交互的应用程序。页面没使用服务渲染当请求页面时返回的body里为空之后执行js将html结构注入到body里结合css显示出来;
SSR的优势
对SEO友好所有的模版、图片等资源都存在服务器端一个html返回所有数据减少HTTP请求响应快、用户体验好、首屏渲染快
1更利于SEO
不同爬虫工作原理类似只会爬取源码不会执行网站的任何脚本使用了React或者其它MVVM框架之后页面大多数DOM元素都是在客户端根据js动态生成可供爬虫抓取分析的内容大大减少。另外浏览器爬虫不会等待我们的数据完成之后再去抓取页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML网络爬中就可以抓取到完整页面的信息。
2更利于首屏渲染
首屏的渲染是node发送过来的html字符串并不依赖于js文件了这就会使用户更快的看到页面的内容。尤其是针对大型单页应用打包后文件体积比较大普通客户端渲染加载所有所需文件时间较长首页就会有一个很长的白屏等待时间。
SSR的局限
1服务端压力较大
本来是通过客户端完成渲染现在统一到服务端node服务去做。尤其是高并发访问的情况会大量占用服务端CPU资源;
2开发条件受限
在服务端渲染中只会执行到componentDidMount之前的生命周期钩子因此项目引用的第三方的库也不可用其它生命周期钩子这对引用库的选择产生了很大的限制;
3学习成本相对较高 除了对webpack、MVVM框架要熟悉还需要掌握node、 Koa2等相关技术。相对于客户端渲染项目构建、部署过程更加复杂。
时间耗时比较
1数据请求
由服务端请求首屏数据而不是客户端请求首屏数据这是快的一个主要原因。服务端在内网进行请求数据响应速度快。客户端在不同网络环境进行数据请求且外网http请求开销大导致时间差 客户端数据请求 服务端数据请求 2html渲染 服务端渲染是先向后端服务器请求数据然后生成完整首屏 html返回给浏览器而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染等待的过程页面是什么都没有的就是用户看到的白屏。就是服务端渲染不需要等待js代码下载完成并请求数据就可以返回一个已有完整数据的首屏页面。 非ssr html渲染 ssr html渲染
可以使用TypeScript写React应用吗怎么操作
1如果还未创建 Create React App 项目
直接创建一个具有 typescript 的 Create React App 项目 npx create-react-app demo --typescript
2如果已经创建了 Create React App 项目需要将 typescript 引入到已有项目中
通过命令将 typescript 引入项目
npm install --save typescript types/node types/react types/react-dom types/jest
将项目中任何 后缀名为 ‘.js’ 的 JavaScript 文件重命名为 TypeScript 文件即后缀名为 ‘.tsx’例如 src/index.js 重命名为 src/index.tsx
React key 是干嘛用的 为什么要加key 主要是解决哪一类问题的
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过程中我们需要保证某个元素的 key 在其同级元素中具有唯一性。
在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素从而减少不必要的元素重渲染此外React 还需要借助 Key 值来判断元素与本地状态的关联关系。
注意事项
key值一定要和具体的元素—一对应尽量不要用数组的index去作为key不要在render的时候用随机数或者其他操作给元素加上不稳定的key这样造成的性能开销比不加key的情况下更糟糕。
React中怎么检验props验证props的目的是什么
React为我们提供了PropTypes以供验证使用。当我们向Props传入的数据无效向Props传入的数据类型和验证的数据类型不符就会在控制台发出警告信息。它可以避免随着应用越来越复杂从而出现的问题。并且它还可以让程序变得更易读。
import PropTypes from prop-types;class Greeting extends React.Component {render() {return (h1Hello, {this.props.name}/h1);}
}Greeting.propTypes {name: PropTypes.string
};
当然如果项目汇中使用了TypeScript那么就可以不用PropTypes来校验而使用TypeScript定义接口来校验props。
React组件命名推荐的方式是哪个
通过引用而不是使用来命名组件displayName。
使用displayName命名组件
export default React.createClass({ displayName: TodoApp, // ...})
React推荐的方法
export default class TodoApp extends React.Component { // ...}
react 父子传值
父传子——在调用子组件上绑定子组件中获取this.props 子传父——引用子组件的时候传过去一个方法子组件通过this.props.methed()传过去参数
connection
React 16中新生命周期有哪些
关于 React16 开始应用的新生命周期 可以看出React16 自上而下地对生命周期做了另一种维度的解读
Render 阶段用于计算一些必要的状态信息。这个阶段可能会被 React 暂停这一点和 React16 引入的 Fiber 架构我们后面会重点讲解是有关的Pre-commit阶段所谓“commit”这里指的是“更新真正的 DOM 节点”这个动作。所谓 Pre-commit就是说我在这个阶段其实还并没有去更新真实的 DOM不过 DOM 信息已经是可以读取的了Commit 阶段在这一步React 会完成真实 DOM 的更新工作。Commit 阶段我们可以拿到真实 DOM包括 refs。
与此同时新的生命周期在流程方面仍然遵循“挂载”、“更新”、“卸载”这三个广义的划分方式。它们分别对应到
挂载过程 constructorgetDerivedStateFromPropsrendercomponentDidMount 更新过程 getDerivedStateFromPropsshouldComponentUpdaterendergetSnapshotBeforeUpdatecomponentDidUpdate 卸载过程 componentWillUnmount
react 最新版本解决了什么问题增加了哪些东西
React 16.x的三大新特性 Time Slicing、Suspense、 hooks
Time Slicing解决CPU速度问题使得在执行任务的期间可以随时暂停跑去干别的事情这个特性使得react能在性能极其差的机器跑时仍然保持有良好的性能Suspense 解决网络IO问题 和lazy配合实现异步加载组件。 能暂停当前组件的渲染 当完成某件事以后再继续渲染解决从react出生到现在都存在的「异步副作用」的问题而且解决得非的优雅使用的是 T异步但是同步的写法这是最好的解决异步问题的方式提供了一个内置函数componentDidCatch当有错误发生时可以友好地展示 fallback 组件; 可以捕捉到它的子元素包括嵌套子元素抛出的异常; 可以复用错误组件。
1React16.8 加入hooks让React函数式组件更加灵活hooks之前React存在很多问题
在组件间复用状态逻辑很难复杂组件变得难以理解高阶组件和函数组件的嵌套过深。class组件的this指向问题难以记忆的生命周期
hooks很好的解决了上述问题hooks提供了很多方法
useState 返回有状态值以及更新这个状态值的函数useEffect 接受包含命令式可能有副作用代码的函数。useContext 接受上下文对象从 React.createContext返回的值并返回当前上下文值useReducer useState 的替代方案。接受类型为 stateaction newState的reducer并返回与dispatch方法配对的当前状态。useCalLback 返回一个回忆的memoized版本该版本仅在其中一个输入发生更改时才会更改。纯函数的输入输出确定性 o useMemo 纯的一个记忆函数 o useRef 返回一个可变的ref对象其Current 属性被初始化为传递的参数返回的 ref 对象在组件的整个生命周期内保持不变。useImperativeMethods 自定义使用ref时公开给父组件的实例值useMutationEffect 更新兄弟组件之前它在React执行其DOM改变的同一阶段同步触发useLayoutEffect DOM改变后同步触发。使用它来从DOM读取布局并同步重新渲染
2React16.9
重命名 Unsafe 的生命周期方法。新的 UNSAFE_前缀将有助于在代码 review 和 debug 期间使这些有问题的字样更突出废弃 javascrip:形式的 URL。以javascript:开头的URL 非常容易遭受攻击造成安全漏洞。废弃Factory组件。 工厂组件会导致 React 变大且变慢。act也支持异步函数并且你可以在调用它时使用 await。使用 React.ProfiLer 进行性能评估。在较大的应用中追踪性能回归可能会很方便
3React16.13.0
支持在渲染期间调用setState但仅适用于同一组件可检测冲突的样式规则并记录警告废弃 unstable_createPortal使用CreatePortal将组件堆栈添加到其开发警告中使开发人员能够隔离bug并调试其程序这可以清楚地说明问题所在并更快地定位和修复错误。
React组件的state和props有什么区别
1props
props是一个从外部传进组件的参数主要作为就是从父组件向子组件传递数据它具有可读性和不变性只能通过外部组件主动传入新的props来重新渲染子组件否则子组件的props以及展现形式不会改变。
2state
state的主要作用是用于组件保存、控制以及修改自己的状态它只能在constructor中初始化它算是组件的私有属性不可通过外部访问和修改只能通过组件内部的this.setState来修改修改state属性会导致组件的重新渲染。
3区别
props 是传递给组件的类似于函数的形参而state 是在组件内被组件自己管理的类似于在一个函数内声明的变量。props 是不可修改的所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。state 是在组件中创建的一般在 constructor中初始化 state。state 是多变的、可以修改每次setState都异步更新的。
react-router 里的 Link 标签和 a 标签的区别
从最终渲染的 DOM 来看这两者都是链接都是 标签区别是∶ Link是react-router 里实现路由跳转的链接一般配合Route 使用react-router接管了其默认的链接跳转行为区别于传统的页面跳转Link 的“跳转”行为只会触发相匹配的Route对应的页面内容更新而不会刷新整个页面。
Link做了3件事情:
有onclick那就执行onclickclick的时候阻止a标签默认事件根据跳转href(即是to)用history (web前端路由两种方式之一history hash)跳转此时只是链接变了并没有刷新页面而a标签就是普通的超链接了用于从当前页面跳转到href指向的另一 个页面(非锚点情况)。
a标签默认事件禁掉之后做了什么才实现了跳转?
let domArr document.getElementsByTagName(a)
[...domArr].forEach(item{item.addEventListener(click,function () {location.href this.href})
})
react 生命周期
初始化阶段
getDefaultProps:获取实例的默认属性getInitialState:获取每个实例的初始化状态componentWillMount组件即将被装载、渲染到页面上render:组件在这里生成虚拟的 DOM 节点componentDidMount:组件真正在被装载之后
运行中状态
componentWillReceiveProps:组件将要接收到属性的时候调用shouldComponentUpdate:组件接受到新属性或者新状态的时候可以返回 false接收数据后不更新阻止 render 调用后面的函数不会被继续执行了componentWillUpdate:组件即将更新不能修改属性和状态render:组件重新描绘componentDidUpdate:组件已经更新
销毁阶段
componentWillUnmount:组件即将销毁
shouldComponentUpdate 是做什么的react 性能优化是哪个周期函数
shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法可以极大的提高性能。
在react17 会删除以下三个生命周期 componentWillMountcomponentWillReceiveProps componentWillUpdate
react router
import React from react
import { render } from react-dom
import { browserHistory, Router, Route, IndexRoute } from react-routerimport App from ../components/App
import Home from ../components/Home
import About from ../components/About
import Features from ../components/Featuresrender(Router history{browserHistory} // history 路由Route path/ component{App}IndexRoute component{Home} /Route pathabout component{About} /Route pathfeatures component{Features} //Route/Router,document.getElementById(app)
)
render(Router history{browserHistory} routes{routes} /,document.getElementById(app)
)React Router 提供一个routerWillLeave生命周期钩子这使得 React组件可以拦截正在发生的跳转或在离开route前提示用户。routerWillLeave返回值有以下两种
return false 取消此次跳转 return 返回提示信息在离开 route 前提示用户进行确认。
对 React Hook 的理解它的实现原理是什么
React-Hooks 是 React 团队在 React 组件开发实践中逐渐认知到的一个改进点这背后其实涉及对类组件和函数组件两种组件形式的思考和侧重。
1类组件 所谓类组件就是基于 ES6 Class 这种写法通过继承 React.Component 得来的 React 组件。以下是一个类组件
class DemoClass extends React.Component {state {text: };componentDidMount() {//...}changeText (newText) {this.setState({text: newText});};render() {return (div classNamedemoClassp{this.state.text}/pbutton onClick{this.changeText}修改/button/div);}
}
可以看出React 类组件内部预置了相当多的“现成的东西”等着我们去调度/定制state 和生命周期就是这些“现成东西”中的典型。要想得到这些东西难度也不大只需要继承一个 React.Component 即可。
当然这也是类组件的一个不便它太繁杂了对于解决许多问题来说编写一个类组件实在是一个过于复杂的姿势。复杂的姿势必然带来高昂的理解成本这也是我们所不想看到的。除此之外由于开发者编写的逻辑在封装后是和组件粘在一起的这就使得类组件内部的逻辑难以实现拆分和复用。
2函数组件函数组件就是以函数的形态存在的 React 组件。早期并没有 React-Hooks函数组件内部无法定义和维护 state因此它还有一个别名叫“无状态组件”。以下是一个函数组件
function DemoFunction(props) {const { text } propsreturn (div classNamedemoFunctionp{函数组件接收的内容[${text}]}/p/div);
}
相比于类组件函数组件肉眼可见的特质自然包括轻量、灵活、易于组织和维护、较低的学习成本等。
通过对比从形态上可以对两种组件做区分它们之间的区别如下
类组件需要继承 class函数组件不需要类组件可以访问生命周期方法函数组件不能类组件中可以获取到实例化后的 this并基于这个 this 做各种各样的事情而函数组件不可以类组件中可以定义并维护 state状态而函数组件不可以
除此之外还有一些其他的不同。通过上面的区别我们不能说谁好谁坏它们各有自己的优势。在 React-Hooks 出现之前类组件的能力边界明显强于函数组件。
实际上类组件和函数组件之间是面向对象和函数式编程这两套不同的设计思想之间的差异。而函数组件更加契合 React 框架的设计理念 React 组件本身的定位就是函数一个输入数据、输出 UI 的函数。作为开发者我们编写的是声明式的代码而 React 框架的主要工作就是及时地把声明式的代码转换为命令式的 DOM 操作把数据层面的描述映射到用户可见的 UI 变化中去。这就意味着从原则上来讲React 的数据应该总是紧紧地和渲染绑定在一起的而类组件做不到这一点。函数组件就真正地将数据和渲染绑定到了一起。函数组件是一个更加匹配其设计理念、也更有利于逻辑拆分与重用的组件表达形式。
为了能让开发者更好的的去编写函数式组件。于是React-Hooks 便应运而生。
React-Hooks 是一套能够使函数组件更强大、更灵活的“钩子”。
函数组件比起类组件少了很多东西比如生命周期、对 state 的管理等。这就给函数组件的使用带来了非常多的局限性导致我们并不能使用函数这种形式写出一个真正的全功能的组件。而React-Hooks 的出现就是为了帮助函数组件补齐这些相对于类组件来说缺失的能力。
如果说函数组件是一台轻巧的快艇那么 React-Hooks 就是一个内容丰富的零部件箱。“重装战舰”所预置的那些设备这个箱子里基本全都有同时它还不强制你全都要而是允许你自由地选择和使用你需要的那些能力然后将这些能力以 Hook钩子的形式“钩”进你的组件里从而定制出一个最适合你的“专属战舰”。
