• 【React的特性&事件&表单的使用&函数组件】


    一、React的特性

    1、ref:使用createRef创建ref,把该ref和节点进行绑定

    2、key:列表在输出元素时,每个列表项需要有key属性。主要作用在构建虚拟的DOM时,进行新旧的区分

    3、children:用于传递组件内部要渲染的内容。通过props.children接收父组件传过来的要渲染的内容

    4、dangerouslySetInnerHTML:在React元素中直接添加InnerHTML

    二、React的事件

    1、react使用的是合成事件而非原生的DOM事件。在react中给元素添加事件类似于行间事件

    (1)行间事件:事件名称纯小写,事件接收的是字符串

    (2)React类似于行间事件:事件名称采用驼峰命名法,可以通过JSX插值表达式放入函数

    2、在React中添加事件时要注意的问题

    (1)事件处理函数是没有绑定this:即在事件处理函数中this为undefined

    (2)若在事件处理函数中要使用this,可以将该事件处理函数变成箭头函数,或者通过bind函数绑定this

    (3)获取事件源:

    clickHandler=(e)=>{
    console.log(e.target) //输出事件源
    }

    (4)在React中阻止默认事件不能使用return false,必须使用event.preventDefault()

    e.preventDefault()

    三、表单的使用

    1、将组件的状态(state)与表单的状态进行绑定:当组件的state发生改变时修改表单的状态,或者表单的状态被改变时通过setState修改组件的状态,这样就形成了组件对表单控件的控制—受控组件

    (1)输入类型的表单控件,控制的是value属性

    (2)单选框和复选框控制的是checked属性

    2、受控组件:实现组件的状态和表单控件状态的同步(间接实现了双向绑定)

    3、非受控组件:组件的状态和表单控件状态不同步(只是表单控件的初值和组件的state一致)。无需添加onChange事件,对于输入型表单控件使用defaultValue,对于复选框和单选框使用defaultChecked.

    四、函数组件

    函数组件 :一个函数就是一个组件(简易组件)。函数的第一个参数是父级组件传过来的props,返回值是该组件 要输出的视图。

    1、在react16.7之前函数组件中不能定义state,也没有生命周期。一般作为纯展示组件使用。又称为无状态组件

    2、类组件的缺点:

    (1)关于this的绑定问题

    (2)很多业务逻辑写在生命周期函数componentDidMount,这样是组件变得复杂并难以维护

    3、React Hooks:React16.8开始使用。本质是一个特殊的函数,提供很多个内置的Hook,来帮助开发者实现很多只能在类组件中使用的功能。

    (1)useState:通过该Hook,开发者可以在函数组件中使用state.

    语法:const [state,setState] = useState(initialState)

    该方法的第一个参数’initialState’:是state的初始值,该方法返回的是一个数组
    该数组的第一个元素(索引为0的元素)是state的具体值,该数组的第二个元素(索引为0的元素)是一个方法,用来更新state值,然后引起视图的更新

    注意的问题:

    a、useState的返回setState方法是同类组件的setState,是一个异步方法,需要组件更新后state的值才能变成新值

    b、useState返回的setState方法不能像类组件中的setState方法来更改多个属性的值

    c、在函数组件中可以使用useState创建多个state

  • 相关阅读:
    猿创征文|那一年
    NestJS入坑
    抖音SEO矩阵系统源码开发搭建
    机器学习入门到大神专栏总览
    IOS开发之页面跳转
    硬件开发笔记(八): 硬件开发基本流程,制作一个USB转RS232的模块(七):创建基础DIP元器件(晶振)封装并关联原理图元器件
    ThreadLocal会用可不够
    【系统架构设计】操作系统(三)
    Python 中从线程获取返回值
    佳乐鲜果蔬小程序设计与实现
  • 原文地址:https://blog.csdn.net/m0_46839072/article/details/126647816