学习react 笔记二

一、组件

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

1.函数组件

const Com = function () {
  return (奥特曼)
}

2.类组件

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

// 注意 固定写法 
class Com extends Component {
  render () {
    return {remdonMath}
  }
}

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

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

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

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

有状态组件：能定义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 {this.state.id} {this.state.userInfo.name}
  }
}

 第二种定义形式

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

  render () {
    return {this.state.id} {this.state.userInfo.name}
  }
}

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

 三、 事件绑定

 on事件名={函数} 

class Com extends React.Component {
  // 在类里面不用谢function
  btn () {
    alert('123')
  }
  render () {
     return 按钮 
  }
}

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

 { alert('123') }}>按钮

事件参数

  return  {
      console.log(e)
      e.preventDefault()
 }}>按钮

四、this指向

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

  }
}

 来看下面一段代码

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  { this.btn() }}>按钮

  }
}

第二种解决方式  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 按钮

  }
}

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

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

  render () {
    // 第三种解决方式 
    return 按钮

  }
}

六、视图数据改变 

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

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

  render () {
    console.log(this)
    return 按钮+1 :{this.state.num} 
  }
}

最主要记住一点 可以赋值 不可以直接修改 赋值要用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 < >
      
      获取值
    

  }
}

 

（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 < >
      
      获取值
    

  }
}

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

ref使用方式格式

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

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

3.refDom 设置表单元素的ref属性  

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