关于react的一些笔记
在react中有多少种定义方式
- 类组件
- 函数组件(无状态组件)
- ES5组件
- Hook组件
- 高阶组件
类组件:
class Test1 extends React.Component{}
函数组件(无状态组件):
import React from 'react'
function Test2(props){
return(
<div></div>
)
}
export default Child1
函数组件没有状态state,没有生命周期,也没有this,不能使用render,它唯一的好处就是性能好。
props是父子之间的纽带
props是只读的,不能修改
props不能赋值给state,props和state没有关系
setState()可以接受第二参数,是一个函数,表示当前异步任务完成的回调
如何理解JSX
- jsx就是一个变量
- jsx也是一个对象
- jsx中可以使用静态属性
- jsx中可以使用动态属性
- jsx本身就是表达式,它的内部还可以使用表达式,用{}包裹
- jsx可以任意嵌套
- jsx中的注释也是变量,所以也有大括号包裹
- jsx中可以防止注入攻击,随意使用用户输入
事件绑定
事件绑定的两种方式
比如定义一个clickHandle事件,然后绑定在div上
clickHandle(){
console.log('this',this);
}
- 用bind的方式绑定,例:
onClick={this.clickHandle.bind(this)}
2. 箭头函数的方式绑定,例:
onClick={()=>this.clickHandle()}
如何拿到事件对象
bind()方式绑定时,事件对象就是对事件函数的最后一个参数,例:
<div onClick={this.clickHandle.bind(this,'111')}>事件绑定1</div>
箭头函数方式绑定时,要手动的传递事件对象{(e)=>this,handle(e)}例:
<div onClick={(e)=>this.clickHandle('222',e)}事件绑定2</div>
阻止默认行为
react里的阻止默认行为其实跟ES5是一样的,preventDefault()
举个栗子:
<a href='https://baidu.com'>百度</a>
大家都知道要是不阻止默认行为就会跳转到百度上。所以为了阻止默认行为:
定义一个linkHandle方法:
linkHandle(e){
e.preventDefault()
}
<a href='https://baidu.com' onClick={this.linkHandle.bind(this)}>百度</a>
这样就好了,就阻止了默认行为也不会跳转了
监听表单的键盘事件
可以用onKeyUp事件,使用e.keyCode来区分那个键盘
话不多说,一个提交表单需求的栗子如下:
inputHandle(e){
console.log('111',e.keyCode);
if(e.keyCode==13){
console.log('提交表单');
}
}
<input type='text' onKeyUp={this.inputHandle.bind(this)}></input>
事件如何传参
bind()方式绑定,this.clickHandle.bind(this.‘arg1’,‘arg2’)
箭头函数绑定 (e)=>this.clickHandle(‘arg3’,e)