组件需要包含内部状态或者使用到生命周期函数的时候使用ClassComponent,否则使用函数式组件
Refs是React提供给我们安全的访问DOM元素或者某个组件实例的句柄,我们可以为元素添加ref属性然后在回调函数中接收该元素在DOM树中的句柄,该值会作为回调函数的第一个参数的返回.
class CustomerForm 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</botton>
</form>
)
}
}
Input域中包含了一个ref属性,该属性的声明的回调函数会接收inout对应的DOM元素,我们将其绑定到this指针以便在其他的类函数中使用,refs并不是类组件的专属,函数式组件同样可以利用闭包的方式暂时存储其值.
function CustomerForm(handleSubmit){
let inputElement ;
return (
<form onSubmit = {()=>handleSubmit(inputElement.value)}>
<input type='text' ref={(input) =>
inputElement = input
} />
<button type="submit">Submit</botton>
</form>
)
}
Keys 是React在操作列表中元素被修改,添加,或者删除的辅助标识.
render(){
return (
<ul>
{this.state.todoItems.map(({task,uid})=>{
return <li key={uid}>{task}</li>
})}
</ul>
)
}
在开发过程中,我们需要保证某个元素的key 在其同级元素中具有唯一性,在ReactDiff算法中React会借助元素的Key值来判断该元素是新创建的还是被移动而来的元素,React会保存这个辅助状态,从而减少不必要的元素渲染.此外,React还需要借助Key值来判断元素与本地状态的关联干洗,因此我们在开发中不可忽视Key值的使用.
如果你创建了类似于下面的 Twitter 元素,那么他相关的类定义是什么样子的?
<Twitter username='chuhan'>
{(user)=> user === null ? <Loading /> : <Badage info = {user}>}
</Twitter>
import React,{Component,PropTypes} from 'react';
import fetchUser from 'Twitter';
class Twitter extends Component {
//todo something
}
回调渲染模式(Render Callback Pattern),在这种模式中,组件会接收某个函数作为子组件,然后在渲染函数中以props.children进行调用.
import React ,{Component,PropTypes} from 'react';
import fetchUser from 'Twitter';
class Twitter extends Component{
state = {
user : null
}
satic propTypes = {
userName.propTypes.String.isRequied
}
componentDidMount(){
fetchUser(this.props.userName)
.then((user)=>{
this.setState({user})
})
}
render(){
return this.props.children(this.state.user)
}
}
此模式的优势在于将父组件与子组件解耦,父组件可以直接访问子组件的内部状态而不需要再通过Props传递,这样父组件能够更为方便地控制子组件展示的UI界面.如果将原本展示的Badge替换为Profile,可以方便的修改回调函数来实现
<Twitter username="chuhan">
{ (user) => user === null }
</Twitter>
作者:Chummy楚寒
链接:https://www.jianshu.com/p/f3c162bb7dea
來源:简书
面试前端的时候,有可能面试官会问你,让你谈谈对HTML5的认识。在教材上有关于HTML5新特性的概述,我觉得有必要整理一下,可以让自己对HTML5有一个比较全面的认知
css sprite是什么,有什么优缺点;display: none; 与 visibility: hidden; 的区别;清除浮动的几种方式;css3有哪些新特性;position的值, relative和absolute定位原点是
前端工程师有时候面试时会遇到一类面试官,他们问的问题对于语言本身非常较真儿,往往不是候选人可能期待的面向实际的问题(有些候选人强调能干活就行,至于知不知道其中缘由是无关痛痒的)
目前拿到的知名公司的offer是腾讯和新美大(大众点评、美团)。一直想写一篇面经分享给大家,但因为一些琐碎的事情,就一直耽误着。
其实在内部函数执行时,无论这个判断是否成立,都会对声明变量进行提升;在js的非严格模式下:函数的实参集合与形参变量存在‘映射关系’,不管其中谁改变了,另外一个都会跟着改变
[] ? !![] : ![];输出结果是什么? 答案是:14。这里的i和j是同步增长,当j加到7的时候,i也等于7,k执行等于14,j再加1,不满足条件,跳出循环,结果为14,如果再问i和j的值,则都为8。
变量类型:var,定义变量;let,定义块域(scope)本地变量;const,定义只读常量。变量格式:以字母、下划线“_”或者$符号开头,大小写敏感。
毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧。。。。
HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法,HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT;这些方法的具体作用是什么?
刷题是我们提高自己技术的一种好方法。下面的问题很有挑战性和“指导性”。如果你知道该怎样回答,那意味着自己的水平很好,但是如果你发现自己答错了,并能够搞清楚为什么错,我认为那会更好!
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!