学习react的笔记，新手必备，详细

关于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

1. jsx就是一个变量
2. jsx也是一个对象
3. jsx中可以使用静态属性
4. jsx中可以使用动态属性
5. jsx本身就是表达式，它的内部还可以使用表达式，用{}包裹
6. jsx可以任意嵌套
7. jsx中的注释也是变量，所以也有大括号包裹
8. jsx中可以防止注入攻击，随意使用用户输入

事件绑定

事件绑定的两种方式

比如定义一个clickHandle事件，然后绑定在div上

clickHandle(){
        console.log('this',this);
    }

1. 用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)