Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

0 篇文章

介绍 React 中的 Refs 及其使用场景?

2019-03-17 回答 Refs 提供了一种方式,用于访问在 render 方法中创建的 React 元素或 DOM 节点。Refs 应该谨慎使用,但是如下一些场景使用 Refs 却更为适合:处理焦点、文本选择或者媒体的控制触发必要的动画集成第三方 DOM 库 Refs 是使用 React.createRef() 方法创建的,他通过 ref 属性附加到 React 元素上。要在整个组件中使用 Refs,需要将 ref 在构造函数中分配给其实例属

React 中如何使用 prop 检查?

2019-03-16 回答当应用程序在开发模式下运行时,React 将自动检查我们在组件上设置的所有属性,以确保他们的数据类型是正确的。对于不正确的数据类型,他将在开发模式下生成警告消息并在控制台输出。由于检查的性能影响,他们在生产模式下将不进行检查。必须传入的属性需包含 isRequired。例如,以下为我们为组件定义的 propTypes:importPropTypesfrom"prop-types"c

React 中的 portals 是什么?

2019-03-15 回答 Portals 提供了一种很好的将子节点渲染到父组件外部 DOM 层级中的 DOM 节点中的方式。ReactDOM.createPortal(child,container) 第一个参数(child)是任意可渲染的 React 子元素,例如一个元素,字符串或片断。第二个参数(container)是一个 DOM 元素。加分回答通常从组件的 render 方法中返回的一个元素,该元素仅能装配到 DOM 节点

在 React 组件类中如何保证 `this` 为正确的上下文?

2019-03-14 回答在 JavaScript 类中,默认情况下方法并没有被绑定。这意味着他们的 this 上下文可以被改变(例如:事件处理方法中 this 为正在侦听事件的元素)但不排除为组件实例。要解决此问题,可以使用 Function.prototype.bind() 强制将组件实例作为 this 上下文。constructor(props){super(props);this.handleClick=this

什么是高阶组件?

2019-03-13 回答高阶组件(HOC)是一个将组件作为参数并返回一个新组件的函数。他是一种由 React 自身组合性质产生的模式。由于高阶组件接受他的组件参数来动态创建子组件,且不会修改或复制其组件中的任何行为,因此他与纯组件较为类似。constEnhancedComponent=higherOrderComponent(WrappedComponent) 加分回答高阶组件可以用来作为状态的抽象和管理

fragments 是什么?

2019-03-12 回答 Fragments 允许 React 组件在没有外层包裹的情况下返回多个元素,通过对子项进行分组而不是向 DOM 添加额外的元素。Fragments 提供了更好的性能,更低的内存使用率,更清晰的 DOM 结构,并且可以帮助处理某些 CSS 机制(如:table,Flexbox 和 Grid)。render(){return(<React.Fragment><ChildA/><ChildB/><Chi

什么是 React 中的错误边界?

2019-03-11 回答错误边界是 React 捕获子组件树中所有 JavaScript 错误的组件,他可以记录这些错误,并将错误显示在 UI 上来替代组件树的崩溃。如果类组件定义了一个名为 componentDidCatch 的新生命周期方法,那么他将成为错误边界。classErrorBoundaryextendsReact.Component{constructor(props){super(props)thi

React 中的 context 是什么?

2019-03-10 回答 Context 提供了一种传递数据的方式,他不需要你手动的通过组件树从上至下逐层传递属性。例如:在应用程序中需要通过许对组件才能获取用户身份验证、本地设置、UI 主题。importReactfrom'react';importReactDOMfrom'react-dom';constThemeContext=React.createContext({background:'red

什么是 `children` 属性?

2019-03-09 回答 children 是传递给组件属性对象的一部分,他提供了组合组件的能力。一个简单的 children 属性示例如下:functionGenericBox({children}){return<divclassName="container">{children}</div>}functionApp(){return(<GenericBox><span>Hello</span><sp

如何将参数传递给事件处理或回调函数?

2019-03-07 回答你可以使用箭头函数把事件处理和传递的参数包裹在内,这等同于调用 bind:<buttononClick={()=>this.handleClick(id)}/><buttononClick={this.handleClick.bind(this,id)}/> 加分回答 React 和 HTML 的事件处理有什么不同?CacheyourReacteventlistenerstoimprov

React 组件生命周期有哪些不同的阶段?

2019-03-06 回答在组件生命周期中有四个不同的阶段:Initialization:在这个阶段,组件准备设置初始化状态和默认属性。Mounting:react 组件已经准备装载到 DOM 上。这个阶段包含 getDerivedStateFromProps 和 componentDidMount 生命周期方法。Updating:在这个阶段,组件通过两种方式进行更新,发送新的属性和更新状态。这个阶段包含 getDe

React 生命周期的方法有哪些?

2019-03-05 回答 getDerivedStateFromProps:在组件装载或更新时渲染前会被调用。当属性随时间而变化时可以用来更新其状态。例如在生命周期中跟踪组件的动画。只有在少数情况下,使用其他生命周期方法是有意义的。他返回一个对象来更新新的状态,或者返回 null 以表示不需要更新任何内容。此方法无权访问组件实例。componentDidMount:首次渲染后调用,适用于所有的 AJAX 请求

key 是什么?列表中使用时有什么优点?

2019-03-04 回答 Keys 是一种特殊的字符串属性,可以帮助 React 识别哪些项已经被修改过、添加过或删除过。当渲染数组元素时就需要使用 key 来给每一个元素进行固定的标识。每一个元素的 key 必须是唯一的(例如,数据中的 IDs 或最终排序后的索引)。consttodoItems=todos.map(todo=><likey={todo.id}>{todo.text}</li>) 加分回答 Keys 为集合

为什么 React 要使用 className 来代替 HTML 中的 class?

2019-03-03 回答 React 一开始的理念是想与浏览器的 DOMAPI 保持一直而不是 HTML,因为这样会和元素的创建更为接近。在元素上设置 class 需要使用 className 这个 API:constelement=document.createElement("div")element.className="hello" 加分回答 ES5 之前,在对象中不能使用保留字。以下代码在 IE8 中将会抛出错误:co

`setState` 使用回调函数作为参数的目的是什么?

2019-03-02 回答当 setState 执行完成且组件被渲染完成时,将调用回调函数。由于 setState 是异步的,因此下一步执行的任何操作都可以使用该回调函数。setState({name:"sudheer"},()=>{console.log("Thenamehasupdatedandcomponentre-rendered")}) 加分回答在 setState 完成后会调用回调函数,下一步需要执行的

什么是无状态组件

2019-03-01 回答无状态组件是本身行为不需要依赖他自身状态的组件。无状态组件可以是函数组件或者类组件。无状态函数组件更易于维护和测试,因为他们可以保证在相同的属性下有相同的输出。当不需要使用生命周期钩子时,应该首先使用无状态函数组件。加分回答无状态组件不依赖他自身的状态。无状态组件可以是类组件或者函数组件。无状态函数组件可以完全避免使用 this 关键字。无状态组件有更高的性能。constComp

React 中什么是有状态的组件?

2019-02-28 回答有状态的组件是一种其行为取决于该状态的组件。这意味着在一个组件的两个实例中,即使给这两个实例赋予相同的属性,他们也不一定会有相同的渲染输出,这和纯函数组件不同。//StatefulclasscomponentclassAppextendsComponent{constructor(props){super(props)this.state={count:0}}render()

React 中如何在 JSX 树中写注释

2019-02-27 回答注释必须包裹在 {} 中并且使用 /**/ 语法,如下所示:consttree=(<div>{/*Comment*/}<p>Text</p></div>)加分回答注释固然很重要, 但最好的代码应该就是文档本身。有意义的类型名和变量名, 要远胜于用注释去解释含糊不清的名字。注释应当解释代码为什么要这么做以及其目的。不要描述显而易见的现象,永远不要使用自然语言翻译代码作为注释,除非对高手来说

状态提升在 React 中的作用

2019-02-26 回答当多个组件需要共享一些相同的数据时,建议将共享的状态提升到离这些组件最近的共同祖先上。例如,如果两个子组件共享了一些相同的数据,那么就建议将共享的状态移至他们的父组件,而不是在两个子组件中使用本地状态进行维护。加分回答状态提升示例:constscaleNames={c:'Celsius',f:'Fahrenheit'};functiontoCelsius(fahrenheit