当前位置:网站首页>[Topic terminator]
[Topic terminator]
2022-07-06 13:11:00 【Brother an Yu】
Write it at the front
CSDN Topic challenge No 1 period
Event details address :CSDN
The topic of the competition : Front end interview book
Join hands to build a front-end interview classic
Topic 1 : stay React Medium element ( element) And the component ( component) What's the difference? ?
answer :
In short , stay React Medium element ( Virtual DOM) Describes what you see on the screen DOM Elements .
To put it another way , stay React The middle element is in the page DOM The object representation of the element . stay React The component in is a function or a class , It can accept input and return an element .
Be careful : In the work , To improve development efficiency , Usually use JSX Grammar said React Elements ( fictitious DOM). At compile time , Turn it into a React. createElement Calling method .
Here we write the answer to question one .
Expand :
What is? React Of refs? Why are they important ?
refs Allow you to directly access DOM Element or component instance . To use them , You can add... To the component ref attribute .
If the value of this attribute is a callback function , It will accept the underlying DOM The mounted instance of an element or component as its first parameter . It can be stored in components .
export class App extends Component {
showResult ( ) {
console. log(this. input. value)
}
render ( ) {
return (
<div>
<input type="text" ref={input => this .input =input } />
< button onClick={this. showResult.bind(this)}> Display the results </ button>
</div>
);
}
}
If the attribute value is a string , React Will instantiate the object in the component refs Properties of the , Store an attribute with the same name , This attribute is for this DOM Reference to element . It can be through native DOM API Operate it .
export class App extends Component {
showResult( )
console .log ( this.refs.username.value)
rende
Topic two :
When calling setState When , What happened ?
answer :
When calling setState when , React The first thing to do is to pass it on to setState Object to the current state of the component , This will start a process called reconciliation ( reconciliation) The process of .
The ultimate goal of reconciliation is , Update in the most effective way according to this new status DOM.
So , React Will build a new React fictitious DOM Trees ( You can think of it as a page DOM The object representation of the element ).
Once you have this DOM Trees , To find out DOM How to respond to the new state and change , React Will link this new tree with the previous virtual DOM Trees compare .
To do so , React You will know the exact changes that have taken place , And by understanding the changes that have taken place , Update when absolutely necessary DOM, That is, the operation of DOM And the occupied space is minimized .
At the end
CSDN Topic challenge No 1 period
- Event details address :CSDN
边栏推荐
- [rtklib 2.4.3 B34] version update introduction I
- All in one 1405: sum and product of prime numbers
- Introduction pointer notes
- [算法] 劍指offer2 golang 面試題2:二進制加法
- Error: symbol not found
- 167. Sum of two numbers II - input ordered array - Double pointers
- 抽象类和接口
- [algorithm] sword finger offer2 golang interview question 3: the number of 1 in the binary form of the first n numbers
- [algorithm] sword finger offer2 golang interview question 10: subarray with sum K
- TYUT太原理工大学2022数据库大题之概念模型设计
猜你喜欢
2022国赛Re1 baby_tree
TYUT太原理工大学2022“mao gai”必背
Heap sort [handwritten small root heap]
MySQL 30000 word essence summary + 100 interview questions, hanging the interviewer is more than enough (Collection Series
面试必备:聊聊分布式锁的多种实现!
记录:初次cmd启动MySQL拒接访问之解决
[algorithm] sword finger offer2 golang interview question 8: the shortest subarray with a sum greater than or equal to K
几道高频的JVM面试题
Abstract classes and interfaces
Excel导入,导出功能实现
随机推荐
[算法] 剑指offer2 golang 面试题9:乘积小于k的子数组
最短Hamilton路径 (状压DP)
Record: Navicat premium can't connect to MySQL for the first time
初识C语言(下)
[算法] 劍指offer2 golang 面試題2:二進制加法
架构师怎样绘制系统架构蓝图?
RTKLIB: demo5 b34f. 1 vs b33
分支语句和循环语句
Wechat applet development experience
Branch and loop statements
What are the advantages of using SQL in Excel VBA
Alibaba cloud side: underlying details in concurrent scenarios - pseudo sharing
Chromatic judgement bipartite graph
系统设计学习(三)Design Amazon‘s sales rank by category feature
如何保障 MySQL 和 Redis 的数据一致性?
MySQL 三万字精华总结 + 面试100 问,吊打面试官绰绰有余(收藏系列
系统设计学习(一)Design Pastebin.com (or Bit.ly)
[Chongqing Guangdong education] Shandong University College Physics reference materials
Abstract classes and interfaces
TYUT太原理工大学2022数据库考试题型大纲