1.React 中 refs 的作用是什么?

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,
该值会作为回调函数的第一个参数返回: class CustomForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
} 上述代码中的 input 域包含了一个 ref 属性,
该属性声明的回调函数会接收 input 对应的 DOM 元素,
我们将其绑定到 this 指针以便在其他的类函数中使用。
另外值得一提的是,refs 并不是类组件的专属,
函数式组件同样能够利用闭包暂存其值: function CustomForm ({handleSubmit}) {
let inputElement
return (
<form onSubmit={() => handleSubmit(inputElement.value)}>
<input
type='text'
ref={(input) => inputElement = input} />
<button type='submit'>Submit</button>
</form>
)
}

2.展示组件(Presentational component)和容器组件(Container component)之间有何不同?

展示组件关心组件看起来是什么。
展示专门通过 props 接受数据和回调,
并且几乎不会有自身的状态,
但当展示组件拥有自身的状态时,
通常也只关心 UI 状态而不是数据的状态。
容器组件则更关心组件是如何运作的。
容器组件会为展示组件或者其它容器组件提供数据和行为(behavior),
它们会调用 Flux actions,
并将其作为回调提供给展示组件。
容器组件经常是有状态的,
因为它们是(其它组件的)数据源。

3.类组件(Class component)和函数式组件(Functional component)之间有何不同?

类组件不仅允许你使用更多额外的功能,
如组件自身的状态和生命周期钩子,
也能使组件直接访问 store 并维持状态
当组件仅是接收 props,
并将组件自身渲染到页面时,
该组件就是一个 '无状态组件(stateless component)',
可以使用一个纯函数来创建这样的组件。
这种组件也被称为哑组件(dumb components)或展示组件

4.(组件的)状态(state)和属性(props)之间有何不同?

State 是一种数据结构,
用于组件挂载时所需数据的默认值。
State 可能会随着时间的推移而发生突变,
但多数时候是作为用户事件行为的结果。
Props(properties 的简写)则是组件的配置。
props 由父组件传递给子组件,
并且就子组件而言,
props 是不可变的(immutable)。
组件不能改变自身的 props,
但是可以把其子组件的 props 放在一起(统一管理)。
Props 也不仅仅是数据--回调函数也可以通过 props 传递。

5.何为受控组件(controlled component)?

在 HTML 中,类似 <input>,
<textarea> 和 <select> 这样的表单元素会维护自身的状态,
并基于用户的输入来更新。
当用户提交表单时,
前面提到的元素的值将随表单一起被发送。
但在 React 中会有些不同,
包含表单元素的组件将会在 state 中追踪输入的值,
并且每次调用回调函数时,
如 onChange 会更新 state,重新渲染组件。
一个输入表单元素,
它的值通过 React 的这种方式来控制,
这样的元素就被称为"受控元素"。

 

撩课-Web大前端每天5道面试题-Day35的更多相关文章

  1. 撩课-Web大前端每天5道面试题-Day10

    1. px和em的区别? px和em都是长度单位; 区别是: px的值是固定的,指定是多少就是多少, 计算比较容易. em得值不是固定的,并且em会继承父级元素的字体大小. 浏览器的默认字体高都是16 ...

  2. 撩课-Web大前端每天5道面试题-Day4

    1. 如何实现瀑布流? 瀑布流布局的原理: ) 瀑布流布局要求要进行布置的元素等宽, 然后计算元素的宽度, 与浏览器宽度之比,得到需要布置的列数; ) 创建一个数组,长度为列数, 里面的值为已布置元素 ...

  3. 撩课-Web大前端每天5道面试题-Day1

    1. var的变量提升的底层原理是什么? JS引擎的工作方式是: 1) 先解析代码,获取所有被声明的变量: 2)然后在运行.也就是说分为预处理和执行两个阶段. 变量提升:所有变量的声明语句都会被提升到 ...

  4. 撩课-Web大前端每天5道面试题-Day11

    1. 如何手写一个JQ插件? 方式一: $.extend(src) 该方法就是将src合并到JQ的全局对象中去: $.extend({ log: ()=>{alert('撩课itLike');} ...

  5. 撩课-Web大前端每天5道面试题-Day31

    1.web storage和cookie的区别? Web Storage的概念和cookie相似, 区别是它是为了更大容量存储设计的. Cookie的大小是受限的, 并且每次你请求一个新的页面的时候C ...

  6. 撩课-Web大前端每天5道面试题-Day25

    1.web前端开发,如何提高页面性能优化? 内容方面: .减少 HTTP 请求 (Make Fewer HTTP Requests) .减少 DOM 元素数量 (Reduce the Number o ...

  7. 撩课-Web大前端每天5道面试题-Day7

    1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复 渐进增强(progressi ...

  8. 撩课-Web大前端每天5道面试题-Day30

    1.什么叫优雅降级和渐进增强? 优雅降级: Web站点在所有新式浏览器中都能正常工作, 如果用户使用的是老式浏览器, 则代码会针对旧版本的IE进行降级处理了, 使之在旧式浏览器上以某种形式降级体验却不 ...

  9. 撩课-Web大前端每天5道面试题-Day23

    1.为什么用Nodejs,它有哪些优缺点? 优点: 事件驱动,通过闭包很容易实现客户端的生命活期. 不用担心多线程,锁,并行计算的问题 V8引擎速度非常快 对于游戏来说,写一遍游戏逻辑代码,前端后端通 ...

随机推荐

  1. JSOI2010 缓存交换

    题目链接:戳我 考虑一个贪心--就是每次我们都选择队列里面之后最晚加入的元素弹出. 维护一个nxt数组就行了. 特判一下之后不会再加入的元素. 代码如下: #include<iostream&g ...

  2. 栈(链式栈)----C语言

    链式栈:就是一种操作受限的单向链表,对单向链表还不了解的可先看一下之前的一篇关于单向链表的随笔,链表(单向链表的建立.删除.插入.打印),理解了单向链表后再来看链式栈就比较轻松了 链式栈的操作一般含有 ...

  3. WINDOWS平台下的栈溢出攻击从0到1(篇幅略长但非常值得一看)

    到1的这个过程.笔者也希望能够通过这些技术分享帮助更多的朋友走入到二进制安全的领域中.2.文章拓扑由于本篇文章的篇幅略长,所以笔者在这里放一个文章的拓扑,让大家能够在开始阅读文章之前对整个文章的体系架 ...

  4. underscore.js源码研究(7)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  5. 微信小程序 - 实战小案例 - 简易记事本

    多项技能,好像也不错.学习一下微信小程序. 教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ 简介:一套用来开发在手机微信上运行的app框架,不用安装 组成: ...

  6. sync.Pool 资源池

    sync.Pool type Pool struct { // 可选参数New指定一个函数在Get方法可能返回nil时来生成一个值 // 该参数不能在调用Get方法时被修改 New func() in ...

  7. Vue2.5开发去哪儿网App 首页开发

    主页划 5 个组件,即 header  icon  swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...

  8. 菜鸟--shell脚本编写之解决问题篇

    一.执行时发现adb shell进入设备后不再继续往下执行了 adb shell cd /system/plugin/....exit 在网上查到的都是bat文件调用adb shell,没有sh文件调 ...

  9. expr命令总结

    expr在linux中是一个功能非常强大的命令.通过学习做一个小小的总结.1.计算字符串的长度.我们可以用awk中的length(s)进行计算.我们也可以用echo中的echo ${#string}进 ...

  10. python使用(四)

    1.file_os_option.py2.file_option.py3.configfile_option.py4.logger_option.py 1.file_os_option.py # co ...