2019-03-07 回答你可以使用箭头函数把事件处理和传递的参数包裹在内,这等同于调用 bind:<buttononClick={()=>this.handleClick(id)}/><buttononClick={this.handleClick.bind(this,id)}/> 加分回答 React 和 HTML 的事件处理有什么不同?CacheyourReacteventlistenerstoimprov
2019-03-06 回答在组件生命周期中有四个不同的阶段:Initialization:在这个阶段,组件准备设置初始化状态和默认属性。Mounting:react 组件已经准备装载到 DOM 上。这个阶段包含 getDerivedStateFromProps 和 componentDidMount 生命周期方法。Updating:在这个阶段,组件通过两种方式进行更新,发送新的属性和更新状态。这个阶段包含 getDe
2019-03-05 回答 getDerivedStateFromProps:在组件装载或更新时渲染前会被调用。当属性随时间而变化时可以用来更新其状态。例如在生命周期中跟踪组件的动画。只有在少数情况下,使用其他生命周期方法是有意义的。他返回一个对象来更新新的状态,或者返回 null 以表示不需要更新任何内容。此方法无权访问组件实例。componentDidMount:首次渲染后调用,适用于所有的 AJAX 请求
2019-03-04 回答 Keys 是一种特殊的字符串属性,可以帮助 React 识别哪些项已经被修改过、添加过或删除过。当渲染数组元素时就需要使用 key 来给每一个元素进行固定的标识。每一个元素的 key 必须是唯一的(例如,数据中的 IDs 或最终排序后的索引)。consttodoItems=todos.map(todo=><likey={todo.id}>{todo.text}</li>)加分回答 Keys 为集合
2019-03-03 回答 React 一开始的理念是想与浏览器的 DOMAPI 保持一直而不是 HTML,因为这样会和元素的创建更为接近。在元素上设置 class 需要使用 className 这个 API:constelement=document.createElement("div")element.className="hello"加分回答 ES5 之前,在对象中不能使用保留字。以下代码在 IE8 中将会抛出错误:co
2019-03-02 回答当 setState 执行完成且组件被渲染完成时,将调用回调函数。由于 setState 是异步的,因此下一步执行的任何操作都可以使用该回调函数。setState({name:"sudheer"},()=>{console.log("Thenamehasupdatedandcomponentre-rendered")})加分回答在 setState 完成后会调用回调函数,下一步需要执行的
2019-03-01 回答无状态组件是本身行为不需要依赖他自身状态的组件。无状态组件可以是函数组件或者类组件。无状态函数组件更易于维护和测试,因为他们可以保证在相同的属性下有相同的输出。当不需要使用生命周期钩子时,应该首先使用无状态函数组件。加分回答无状态组件不依赖他自身的状态。无状态组件可以是类组件或者函数组件。无状态函数组件可以完全避免使用 this 关键字。无状态组件有更高的性能。constComp
2019-02-28 回答有状态的组件是一种其行为取决于该状态的组件。这意味着在一个组件的两个实例中,即使给这两个实例赋予相同的属性,他们也不一定会有相同的渲染输出,这和纯函数组件不同。//StatefulclasscomponentclassAppextendsComponent{constructor(props){super(props)this.state={count:0}}render()
2019-02-27 回答注释必须包裹在{}中并且使用/**/语法,如下所示:consttree=(<div>{/*Comment*/}<p>Text</p></div>)加分回答注释固然很重要,但最好的代码应该就是文档本身。有意义的类型名和变量名,要远胜于用注释去解释含糊不清的名字。注释应当解释代码为什么要这么做以及其目的。不要描述显而易见的现象,永远不要使用自然语言翻译代码作为注释,除非对高手来说
2019-02-26 回答当多个组件需要共享一些相同的数据时,建议将共享的状态提升到离这些组件最近的共同祖先上。例如,如果两个子组件共享了一些相同的数据,那么就建议将共享的状态移至他们的父组件,而不是在两个子组件中使用本地状态进行维护。加分回答状态提升示例:constscaleNames={c:'Celsius',f:'Fahrenheit'};functiontoCelsius(fahrenheit
2019-02-25 回答元素是用来展现 DOM 节点或组件的一个普通 JavaScript 对象。元素是一个纯的,不需要进行状态变化且创建成本较低的对象。组件是一个方法或者类。组件可以有 state 并且可以将 props 作为输入然后返回一个元素的树形结构作为为输出(虽然他们可以表示一个通用的容器或包装器,但 DOM 的提交并不是必须的)。组件在生命周期的方法中可能会引起副作用(如 AJAX 请求,DOM 修改,第三方库的
2019-02-24 回答虚拟 DOM(VDOM)是使用 JavaScript 普通对象来描述真实 DOM 的展现方式。这些对象具有描述真实 DOM 节点的属性,比如:节点名称,他的属性和子节点。<divclass="counter"><h1>0</h1><button>-</button><button>+</button></div> 上面的 DOM 元素使用虚拟 DOM 可以如下进行表示:{nodeName:"div"
2019-02-23 回答在你的 JavaScript 源文件开头包含'usestrict'可以启用严格模式,该模式强制开启了更为严格的 JavaScript 代码解析和错误处理。他被认为是一种很好的实践,为开发者提供了以下便捷之处:通过抛出错误来消除了一些原有的静默错误,让调试更加容易。修复了一些导致 JavaScript 引擎难以执行优化的缺陷:有时候,相同的代码,严格模式可以比非严格模式下运行得更快。提高 J
2019-02-22 回答主要目的是避免直接操作 DOM 并使应用程序的状态能够简单的和 UI 保持同步。此外,他们还提供了创建组件的功能,在有相似功能(具有细小区别)的时候就可以进行重复使用,这样每当需要更新在多个地方重用的组件结构时就可以避免多个地方的重复修改。像 jQuery 这样对 DOM 操作的库,应用程序的数据通常保存在 DOM 自身中,通常作为类名或者 data 的属性。操作 DOM 来更新 UI 涉及许多额外的步骤并
2019-02-21 回答 this 关键字是函数执行过程中用于表示上下文的对象。传统的常规函数可以使用 call()、apply()和 bind()方法来改变他们的 this 值。箭头函数会隐式的绑定 this,因此无论其上下文是否使用 call()进行设置,他的上下文引用都是其词法环境中的上下文。这有一些关于 this 是如何工作的常见例子:Objectliterals 如果使用对象本身调用其内部函数时,该函数的 thi
2019-02-20 回答静态方法属于一个类,他不能在实例上使用。实例方法属于类的原型,他继承自该类的所有实例并可以在实例上使用。Array.isArray//数组的静态方法 Array.prototype.push//数组的实例方法如果 Array.isArray 方法做为数组的一个实例方法将没有任何意义,因为当他可以正常运行时,我们已经知道这个他是一个数组了。实例方法在技术上可以当作静态方法使用,只是
2019-02-19 回答递归描述了用自身相似的方法去重复事物的过程。在 JavaScript 中,递归可以理解为函数重复调用自身直到满足某个基本条件时。递归需要基本条件来打断他的循环,否则函数就会不停的调用自身。在处理包含未知嵌套深度的数据结构时,递归非常有用。例如,数据库返回一些平面数组结构的评论给你,他们在数据库中是通过父子 id 来进行关联的,但需要你在界面上为其展示为嵌套的树形结构。每条评论要么是顶
2019-02-18 回答纯函数是一个满足以下两个条件的函数:给定相同的输入,返回输出结果必须相同在作用域之外不能改变其他数据或提供给函数的数据。纯函数在满足以上两个条件时,允许在自身内部对自己的变量进行改变。纯函数 consta=(x,y)=>x+yconstb=(arr,value)=>arr.concat(value)constc=arr=>[...arr].sort((a,b)=>a-b)非纯函
2019-02-17 提问创建一个 pipe 函数,使其通过返回带有一个参数的函数来从左到右依次执行传入的函数 constsquare=v=>v*vconstdouble=v=>v*2constaddOne=v=>v+1constres=pipe(square,double,addOne)res(3)//19;addOne(double(square(3)))回答首先使用展开运算符...让提供的所有参数转换
2019-02-16 回答 NaN(Not-a-Number)无论使用什么比较运算符进行比较时,他是唯一不等于自身的值。NaN 通常是没有意义的数学计算的结果,因此两个 NaN 值被认为相等是没有意义的。加分回答根据上述,可以简单的实现 isNaN:constisNotNumber=x=>x!==xisNaN()和 Number.isNaN()的区别如下:isNaN(NaN);//trueisNaN('AStri