2019-03-26 描述使用函数作为参数,然后将该函数的第一个参数作为最后一个参数。提示使用扩展运算符接受第二个及以后的参数返回一个接受可变参数的闭包函数,并交换输入参数的位置代码 constflip=fn=>(first,...rest)=>fn(...rest,first);示例对象合并:leta={name:'JohnSmith'};letb={};constmergeFrom=flip(Obj
2019-03-25 描述将使用数组为参数的函数修改为使用可变参数的函数。提示接受该函数 fn 为参数并返回一个闭包函数闭包函数使用扩展运算符将所有输入作为数组传入 fn 函数中。代码 constcollectInto=fn=>(...args)=>fn(args);示例对多个异步请求的返回进行输出处理:constp1=Promise.resolve(1);constp2=newPromise(resolve=
2019-03-24 描述根据输入的关键字和一组参数使返回的函数可以根据传入的参数去执行关键字方法。提示使用闭包调用传入的关键字和一组参数。使用柯里化函数。代码 constcall=(key,...args)=>context=>context[key](...args);示例对数组进行计算并返回其结果:call('map',x=>2*x)([1,2,3])//[2,4,6]Promise.resolv
2019-03-23 描述创建一个最多接受 n 个参数的函数,他可以忽略任何多余的参数。提示参数 fn 为提供的函数,n 为函数最多接受的参数的个数,可使用 Array.prototype.slice(0,n)和扩展运算符...。代码 constary=(fn,n)=>(...args)=>fn(...args.slice(0,n));示例依次获取长度不同的数组中的前 2 位中较大的值:constfirstTwoMax
2019-03-22 回答 XSS 是指客户端代码注入,攻击者将带有恶意脚本的代码注入到合法的网站或 web 应用程序中。这通常发生在应用程序对用户的输入不进行验证时,这样恶意代码就会轻松的注入到动态的 HTML 内容中。例如,一个评论系统如果没有对用户的输入进行验证或转义,那么该评论系统将面临风险。如果评论内容中包含未转义的 HTML,那么评论时就可以将 <script> 标签注入到网站中,当其他用户访问这个评论页面
2019-03-21 回答事件循环处理所有的异步回调。回调在一个循环中进行排队,当代码运行时,队列中的每一个回调在接收到响应时将逐个进行运行。当 Node.js 启动时会初始化事件循环,每一个事件循环都有如下顺序的六个循环阶段:加分回答事件循环允许 Node.js 执行非阻塞的 I/O 操作,尽管 JavaScript 是单线程的。返回总目录 30 秒面试系列一
2019-03-20 提问如何避免以下这种地狱回调的情况?getData(function(a){getMoreData(a,function(b){getMoreData(b,function(c){getMoreData(c,function(d){getMoreData(d,function(e){//...})})})})})回答重构返回 promises 的函数,使用最佳的 async/await
2019-03-19 回答 REST(REpresentationalStateTransfer)是一种用于网络架构的软件设计模式。RESTfulWeb 应用程序使用和资源相关的信息方式对数据进行公开。通常,这个概念用于管理 Web 应用程序中的状态。对于大多数应用程序来说,他们对数据都有读取,创建,更新和销毁这四个共同的操作。数据模块化后形成单独的表,如 posts,users,comments,RESTfu
2019-03-18 回答 NodeJS 通常使用回调模式,如果在执行期间发生错误,会把错误作为回调的第一个参数传递到回调函数中:fs.readFile(filePath,function(err,data){if(err){//错误处理,return 可以让执行停止,这非常重要 returnconsole.log(err)}//使用数据对象 console.log(data)})优点包括如下:如果不需要引用数
2019-03-17 回答 Refs 提供了一种方式,用于访问在 render 方法中创建的 React 元素或 DOM 节点。Refs 应该谨慎使用,但是如下一些场景使用 Refs 却更为适合:处理焦点、文本选择或者媒体的控制触发必要的动画集成第三方 DOM 库 Refs 是使用 React.createRef()方法创建的,他通过 ref 属性附加到 React 元素上。要在整个组件中使用 Refs,需要将 ref 在构造函数中分配给其实例属
2019-03-16 回答当应用程序在开发模式下运行时,React 将自动检查我们在组件上设置的所有属性,以确保他们的数据类型是正确的。对于不正确的数据类型,他将在开发模式下生成警告消息并在控制台输出。由于检查的性能影响,他们在生产模式下将不进行检查。必须传入的属性需包含 isRequired。例如,以下为我们为组件定义的 propTypes:importPropTypesfrom"prop-types"c
2019-03-15 回答 Portals 提供了一种很好的将子节点渲染到父组件外部 DOM 层级中的 DOM 节点中的方式。ReactDOM.createPortal(child,container)第一个参数(child)是任意可渲染的 React 子元素,例如一个元素,字符串或片断。第二个参数(container)是一个 DOM 元素。加分回答通常从组件的 render 方法中返回的一个元素,该元素仅能装配到 DOM 节点
2019-03-14 回答在 JavaScript 类中,默认情况下方法并没有被绑定。这意味着他们的 this 上下文可以被改变(例如:事件处理方法中 this 为正在侦听事件的元素)但不排除为组件实例。要解决此问题,可以使用 Function.prototype.bind()强制将组件实例作为 this 上下文。constructor(props){super(props);this.handleClick=this
v1.0.0 简介该版本使用 markdown-it 添加了前端对 markdwon 解析预览的支持。v1.0.0 变更记录 15 添加测试用例 development9 支持前端预览 mdenhancement 历史版本变更请浏览这里。
2019-03-13 回答高阶组件(HOC)是一个将组件作为参数并返回一个新组件的函数。他是一种由 React 自身组合性质产生的模式。由于高阶组件接受他的组件参数来动态创建子组件,且不会修改或复制其组件中的任何行为,因此他与纯组件较为类似。constEnhancedComponent=higherOrderComponent(WrappedComponent)加分回答高阶组件可以用来作为状态的抽象和管理
2019-03-12 回答 Fragments 允许 React 组件在没有外层包裹的情况下返回多个元素,通过对子项进行分组而不是向 DOM 添加额外的元素。Fragments 提供了更好的性能,更低的内存使用率,更清晰的 DOM 结构,并且可以帮助处理某些 CSS 机制(如:table,Flexbox 和 Grid)。render(){return(<React.Fragment><ChildA/><ChildB/><Chi
2019-03-11 回答错误边界是 React 捕获子组件树中所有 JavaScript 错误的组件,他可以记录这些错误,并将错误显示在 UI 上来替代组件树的崩溃。如果类组件定义了一个名为 componentDidCatch 的新生命周期方法,那么他将成为错误边界。classErrorBoundaryextendsReact.Component{constructor(props){super(props)thi
2019-03-10 回答 Context 提供了一种传递数据的方式,他不需要你手动的通过组件树从上至下逐层传递属性。例如:在应用程序中需要通过许对组件才能获取用户身份验证、本地设置、UI 主题。importReactfrom'react';importReactDOMfrom'react-dom';constThemeContext=React.createContext({background:'red
2019-03-09 回答 children 是传递给组件属性对象的一部分,他提供了组合组件的能力。一个简单的 children 属性示例如下:functionGenericBox({children}){return<divclassName="container">{children}</div>}functionApp(){return(<GenericBox><span>Hello</span><sp
2019-03-08 回答 callbackrefs 要优于 findDOMNode()API,因为 findDOMNode()阻碍了 React 在未来的改进。//使用 findDOMNode()的传统方法 classMyComponentextendsComponent{componentDidMount(){findDOMNode(this).scrollIntoView()}render(){return<d