Vanessa

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

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