1.展示组件(Presentational component)和容器组件(Container component)之间有何不同
展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态。(子组件)容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior),它们会调用 Flux actions,并将其作为回调提供给展示组件。容器组件经常是有状态的,因为它们是(其它组件的)数据源。(父组件)
2.类组件(Class component)和函数式组件(Functional component)之间有何不同
类组件不仅允许你使用更多额外的功能,如组件自身的状态和生命周期钩子,也能使组件直接访问 store 并维持状态当组件仅是接收 props,并将组件自身渲染到页面时,该组件就是一个 ‘无状态组件(stateless component)’,可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件
3.(组件的)状态(state)和属性(props)之间有何不同
State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。
4.受控组件和非受控组件区别
受控组件: 1.没有维持自己的状态 2.数据由父组件控制 3.通过 props 获取当前值,然后通过回调通知更改
非受控组件: 1、保持着自己的状态 2、数据由 DOM 控制 3、Refs 用于获取其当前值
5.何为高阶组件(higher order component)
高阶组件是重用组件逻辑的高级方法,是一种源于 React 的组件模式。 HOC 是自定义组件,在它之内包含另一个组件。它们可以接受子组件提供的任何动态,但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯(Pure)”组件。
6、你能用HOC做什么?
HOC可用于许多任务,例如:
代码重用,逻辑和引导抽象渲染劫持状态抽象和控制Props 控制
7. 什么是纯组件?
纯(Pure)*组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。
8.应该在 React 组件的何处发起 Ajax 请求
在 React 组件中,应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用 setState,这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
9.react中组件传值
父传子(组件嵌套浅):父组件定义一个属性,子组件通过this.props接收。
子传父:父组件定义一个属性,并将一个回调函数赋值给定义的属性,然后子组件进行调用传过来的函数,并将参数传进去,在父组件的回调函数中即可获得子组件传过来的值。
10.react 组件的划分业务组件技术组件?
根据组件的职责通常把组件分为 UI 组件和容器组件。UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。两者通过 React-Redux 提供 connect 方法联系起来。
11. 你理解“在React中,一切都是组件”这句话。
组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立,而不会影响 UI 的其余部分。
12. 解释 React 中 render() 的目的。
每个React组件强制要求必须有一个 render()。它返回一个 React 元素,是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 , ,
等。此函数必须保持纯净,即必须每次调用时都返回相同的结果。
13、区分有状态和无状态组件。
有状态组件无状态组件
1. 在内存中存储有关组件状态变化的信息1. 计算组件的内部的状态2. 有权改变状态2. 无权改变状态3. 包含过去、现在和未来可能的状态变化情况3. 不包含过去,现在和未来可能发生的状态变化情况4. 接受无状态组件状态变化要求的通知,然后将 props 发送给他们。4.从有状态组件接收 props 并将其视为回调函数。
14. 什么是 Props?
Props 是 React 中属性的简写。它们是只读组件,必须保持纯,即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流,通常用于呈现动态生成的数据。
15. React中的状态是什么?它是如何使用的?
状态是 React 组件的核心,是数据的来源,必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同,它们是可变的,并创建动态和交互式组件。可以通过 this.state() 访问它们。
16. 区分状态和 props
条件StateProps
1. 从父组件中接收初始值YesYes2. 父组件可以改变值NoYes3. 在组件中设置默认值YesYes4. 在组件的内部变化YesNo5. 设置子组件的初始值YesYes6. 在子组件的内部更改NoYes
17、React中的合成事件是什么?
合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。
18、reactJS的props.children.map函数来遍历会收到很多异常提示,为什么?该如何遍历?
this.props.children的值有三种可能: 如果当前组件没有子节点,它就是undefined; 如果有一个子节点,数据类型就是object; 如果有多个子节点,数据类型就是array。 系统提供React.Children.map()方法安全地遍历子节点对象
19、什么时候在功能组件( Class Component )上使用类组件( Functional Component )?
如果您的组件具有状态( state ) 或 生命周期方法,请使用 Class 组件。否则,使用功能组件
20、MVC框架的主要问题是什么?
以下是MVC框架的一些主要问题:
对 DOM 操作的代价非常高程序运行缓慢且效率低下内存浪费严重由于循环依赖性,组件模型需要围绕 models 和 views 进行创建
21、解释一下 Flux
Flux 是一种强制单向数据流的架构模式。它控制派生数据,并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。
因为题多,所以分了几篇文章: 第一篇(一)https://blog.csdn.net/g1437353759/article/details/109204846 第二篇(二)https://blog.csdn.net/g1437353759/article/details/109206187