撩课-Web大前端每天5道面试题-Day35
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的更多相关文章
- 撩课-Web大前端每天5道面试题-Day10
1. px和em的区别? px和em都是长度单位; 区别是: px的值是固定的,指定是多少就是多少, 计算比较容易. em得值不是固定的,并且em会继承父级元素的字体大小. 浏览器的默认字体高都是16 ...
- 撩课-Web大前端每天5道面试题-Day4
1. 如何实现瀑布流? 瀑布流布局的原理: ) 瀑布流布局要求要进行布置的元素等宽, 然后计算元素的宽度, 与浏览器宽度之比,得到需要布置的列数; ) 创建一个数组,长度为列数, 里面的值为已布置元素 ...
- 撩课-Web大前端每天5道面试题-Day1
1. var的变量提升的底层原理是什么? JS引擎的工作方式是: 1) 先解析代码,获取所有被声明的变量: 2)然后在运行.也就是说分为预处理和执行两个阶段. 变量提升:所有变量的声明语句都会被提升到 ...
- 撩课-Web大前端每天5道面试题-Day11
1. 如何手写一个JQ插件? 方式一: $.extend(src) 该方法就是将src合并到JQ的全局对象中去: $.extend({ log: ()=>{alert('撩课itLike');} ...
- 撩课-Web大前端每天5道面试题-Day31
1.web storage和cookie的区别? Web Storage的概念和cookie相似, 区别是它是为了更大容量存储设计的. Cookie的大小是受限的, 并且每次你请求一个新的页面的时候C ...
- 撩课-Web大前端每天5道面试题-Day25
1.web前端开发,如何提高页面性能优化? 内容方面: .减少 HTTP 请求 (Make Fewer HTTP Requests) .减少 DOM 元素数量 (Reduce the Number o ...
- 撩课-Web大前端每天5道面试题-Day7
1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复 渐进增强(progressi ...
- 撩课-Web大前端每天5道面试题-Day30
1.什么叫优雅降级和渐进增强? 优雅降级: Web站点在所有新式浏览器中都能正常工作, 如果用户使用的是老式浏览器, 则代码会针对旧版本的IE进行降级处理了, 使之在旧式浏览器上以某种形式降级体验却不 ...
- 撩课-Web大前端每天5道面试题-Day23
1.为什么用Nodejs,它有哪些优缺点? 优点: 事件驱动,通过闭包很容易实现客户端的生命活期. 不用担心多线程,锁,并行计算的问题 V8引擎速度非常快 对于游戏来说,写一遍游戏逻辑代码,前端后端通 ...
随机推荐
- 【转】C# Enum,Int,String的互相转换 枚举转换
Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...
- drf-视图的理解
1. 类视图 写视图的步骤: 1. 数据库查询, 2. 构建序列化器, 进行序列化操作, 返回数据 一. 两大基类 >1 APIView (以常规的方法实现get po ...
- Linux Shell命令行快捷键
1. 命令行编辑 <Ctrl>+a 移动光标到行首 <Ctrl>+e ..........行尾 <Alt>+f 光标右移一个词 <Alt>+b .... ...
- jq 复习帖子 常用操作
1绝对定位(abs)与相对定位(relative) 区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把其它的层遮罩住 绝对定位就 ...
- Oracle 查看当前数据库版本的方法
常用的有三种方法: 方法一:v$version SQL> select * from v$version; BANNER ---------------------------------- ...
- Hadoop 2.4.1+HBase 0.98.6.1 分布式安装
参考:http://blog.csdn.net/wind520/article/details/39856353
- Strom的trident小例子
上代码: public class TridentFunc { /** * 类似于普通的bolt */ public static class MyFunction extends BaseFunct ...
- 一口一口吃掉Hexo(四)
如果你想得到更好的阅读效果,请访问我的个人网站 ,版权所有,未经许可不得转载! 人总是不会满足于现状,接下来我们就可以让我们的朋友们通过独立域名访问我们的网站了,但是这肯定是要花点钱的,所以这篇文章难 ...
- 使用XHProf分析PHP性能瓶颈(一)
安装xhprof扩展 wget http://pecl.php.net/get/xhprof-0.9.4.tgz tar zxf xhprof-0.9.4.tgz cd xhprof-0.9.4/ex ...
- Spring整合Mybatis原理简单分析
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean" ...