学习react 笔记二 （组件）

Posted 2022-12-06 奥特曼　

一、组件

组件呢 一般还是挺常用的 但react怎么创建组件呢

1.函数组件

const Com = function () 
  return (<div>奥特曼</div>)

2.类组件

import  Component  from 'react' // 提供最核心的react组件功能

// 注意 固定写法 
class Com extends Component 
  render () 
    return <div>remdonMath</div>
  

二、有状态组件和无状态组件

什么是状态：是用来描述事物在某一时刻的形态的数据

状态的特点：能被修改，改了之后对应的视图也能更新

函数组件是 无状态组件 类组件是有状态组件

有状态组件：能定义state的组件 （类组件）

无状态组件：不能定义state （函数组件）

在2019年 2月 6 日 ，react 16.8 引入了 React Hooks 从而函数式组件也能定义自己的状态了

1.类组件的状态 

 第一种定义形式

class Com extends React.Component 
    state = 
    id: 1,
    userInfo: 
       name: '奥特曼',
      age: '111'
     
   


  render () 
    return <div>this.state.id this.state.userInfo.name</div>
  

 第二种定义形式

class Com extends React.Component 
  constructor() 
    super()
    this.state = 
      id: 1,
      userInfo: 
        name: '奥特曼',
        age: '111'
      
    
  

  render () 
    return <div>this.state.id this.state.userInfo.name</div>
  

注意 内部的state 不可以改 否则 数据不会跟着改变  

 三、 事件绑定

 on事件名=函数 

class Com extends React.Component 
  // 在类里面不用谢function
  btn () 
    alert('123')
  
  render () 
     return <div onClick=this.btn>按钮</div> 
  

简单的可以用箭头函数 复杂的可以在外部定义一个函数

<div onClick=() =>  alert('123') >按钮</div>

事件参数

  return <a href='https://blog.csdn.net/m0_46846526?type=blog' onClick=(e) => 
      console.log(e)
      e.preventDefault()
 >按钮</a>

四、this指向

//  注意 内部的state 不可以改 否则 数据不会跟着改变
class Com extends React.Component 
  state = 
    name: '111'
  
  // 在类里面写函数不用谢function
  btn (e) 
    console.log(this) // undefined
  
  render () 
    console.log(this) //实例
    // 这个 this 相当于有一个作用域块被包起来了
    // return <div onClick=this.btn>按钮</div>
    // 函数中也没有谁指向调的btn函数 所以也指向undefined
    return <div onClick=btn>按钮</div>

  

 来看下面一段代码

class person 
  constructor(name, age) 
    this.name = name
    this.age = age
  

  say () 
    console.log(this, 'say')
  


const p1 = new person('奥特曼', 18)
p1.say()

p2 = p1.say
p2()  // undefined  

p3 = p1.say 
window.p3()  //window

 上面是因为p1调的所以执行p1 而 p2是在window作用域下调的 但是 class 内部有一个作用域块 也可以理解为严格模式下 被保住了 没有this  
 所以总结 普通的 this 谁调它就会指向谁  如果没有指定就没有this  所以指向undefined
 如果写window.那么是在会执行window

 五、解决this指向

 第一种解决方式  个人理解的是指向了上层作用域的this

class Com extends React.Component 
  // 在类里面写函数不用谢function
  btn (e) 
    console.log(this.state)
  

  render () 
    console.log(this)
    let btn = this.btn
    // 第一种解决方式  个人理解的是指向了上层作用域的this
    return <div onClick=() =>  this.btn() >按钮</div>

  

第二种解决方式  bind   bind只是改变this 还是一个函数 

页面代码从上到下执行  所以执行到bind 的时候就已经指向了 this

class Com extends React.Component 

  // 在外层写一个箭头函数
  btn2 = () => 
    console.log(this.state)
  

  render () 
    console.log(this)
    let btn = this.btn
    // 第二种解决方式  bind   bind只是改变this 还是一个函数
     return <div onClick=this.btn.bind(this)>按钮</div>

  

 第三种解决方式 外层写成箭头函数 

class Com extends React.Component 
  // 在外层写一个箭头函数
  btn2 = () => 
    console.log(this.state)
  

  render () 
    // 第三种解决方式 
    return <div onClick=this.btn2>按钮</div>

  

六、视图数据改变 

class Com extends React.Component 
  constructor() 
    super()

    this.state = 
      num: 1
    
  
  btn2 = () => 
    this.setState(
      num: this.state.num + 1
    )
  

  render () 
    console.log(this)
    return <div onClick=this.btn2>按钮+1 :this.state.num </div>
  

最主要记住一点 可以赋值 不可以直接修改 赋值要用setState(变量名:值)

七、理解受控

受控：表单元素input是可任意输入的，理解input自己维护它的状态 value

1.在state中定义状态

2.将state中的状态与表单元素的value 值绑定在一起，进行通过state中的状态来控制表单元素的值

（1）非受控组件

import  createRef, Component  from 'react'

//  注意 内部的state 不可以改 否则 数据不会跟着改变
class Com extends Component 
  refDom = createRef()
  btn2 = () => 
    console.log(this.refDom)
  

  render () 
    console.log(this)
    return < >
      <input type="text" ref=this.refDom></input>
      <button onClick=this.btn2>获取值</button>
    </>

  

（2）受控组件

import  createRef, Component  from 'react'


//  注意 内部的state 不可以改 否则 数据不会跟着改变
class Com extends Component 
  state = 
    name: ''
  
  refDom = createRef()

  change = (e) => 
    this.name = e.target.value
  
  btn2 = () => 
    console.log(this.refDom.current.value)
    console.log(this.name)
  

  render () 
    console.log(this)
    // 第三种解决方式 
    return < >
      <input type="text" value=this.name onChange=this.change ref=this.refDom></input>
      <button onClick=this.btn2>获取值</button>
    </>

  

可以理解为双向绑定 默认使用state里的值 修改后利用onChange/onInput来修改 变量值

ref使用方式格式

1. 导入方法 import createRef  from 'react'

2.调用createRef 方法创建引用  例如 const  refDom = createRef()

3.refDom 设置表单元素的ref属性  <input type="text"  ref=this.refDom></input>

4.通过 refDom.current.value 来获取值  this.refDom.current.value