react学习笔记---(2) react三大核心属性: state, props, refs

1. state

• state属性值是一个对象，通过更新组件的state来更新对应的页面(重新渲染组件)

Demo1.jsx --- 函数式组件

import React, { useState } from 'react'

export default function Demo1 () {
  // 声明一个flag 变量用于控制显示名字
  const [flag, setflag] = useState({ flag: true })
  function changeName () {
    setflag(!flag)
  }
    
  return (
    <div>
      <h2>当前名字是: {flag ? '小青蛙' : '小牛马'}</h2>
      <button onClick={changeName}>点我改变名字</button>
    </div>
  )
}

Demo2.jsx --- 类式组件

import React, { Component } from 'react'

export default class Demo2 extends Component {
  state = {
    flag: true
  }
  changeName = () => {
    // 将flag从state中解构出来
    const {flag} = this.state
    this.setState({flag: !flag})
  }

  render () {
    return (
      <div>
        <h2>当前名字是: {this.state.flag ? '小青蛙' : '小牛马'}</h2>
        <button onClick={this.changeName}>点我改变名字</button>
      </div>
    )
  }
}

2. props

• 组件使用props可以接受到组件外部传递的值----常用于父子组件传递

• 组件无论是使用函数声明还是通过 class 声明，都绝不能修改自身的 props。

Demo1.jsx --- 函数式组件中使用

import React, { useState } from 'react'
import PropTypes from 'prop-types';
import './Demo.css'

export default function Demo1 () {
  const [name, setName] = useState('小鸭')
  const [age, setAge] = useState(98)
  return (
    <div className='parent'>
      我是Demo1组件----我的名字是 {name}
      
      <Demo1Son name= {name} age={age}></Demo1Son>
    </div>
  )
}
// 进行props的类型检查
Demo1Son.propTypes={
  name:PropTypes.string.isRequired,     //name指定为字符串类型，而且必须得填，不能为空
  age:PropTypes.number,
}
Demo1Son.defaultProps = {         //如果sex或者age值为空，就使用默认值
  sex:'男',
  age:18
}

function Demo1Son(props) {
  // 由于父组件没有传入sex值  所以使用默认值---男
  const {name, age, sex} = props
  return (
    <div className='son'>
      我是Demo1的子组件----我收到了父组件的数据---{name}---{age}---{sex}
    </div>
  )
}

Demo2.jsx --- 类式组件中使用

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import './Demo.css'

export default class Demo2 extends Component {
  state = { name: '小鸡', age: 97 }
  render () {
    const {name, age} = this.state
    return (
      <div className='parent'>
        我是Demo2组件----我的名字是 {name}

        <Demo2Son name={name} age={age}></Demo2Son>
      </div>
    )
  }
}

class Demo2Son extends Component {
  // 进行props的类型检查---类式组件中使用需要 static
  static propTypes = {
    name: PropTypes.string.isRequired,     //name指定为字符串类型，而且必须得填，不能为空
    age: PropTypes.number,
  }
  static defaultProps = {         //如果sex或者age值为空，就使用默认值
    sex: '男',
    age: 18
  }

  render () {
  	// 由于父组件没有传入sex值  所以使用默认值---男
    const {name, age, sex} = this.props
    return (
      <div className='son'>
        我是Demo2的子组件----我收到了父组件的数据---{name}---{age}---{sex}

      </div>
    )
  }
}

3. refs

• 允许我们访问 DOM 节点或在 render 方法中创建的 React 元素
• 组件内的标签可以定义ref属性来标识自己

Demo1.jsx --- 函数式组件中使用

import React, {useRef} from 'react'

export default function Demo1() {
  const myRef = useRef()

  function showName() {
    const {value} = myRef.current
    console.log(value);
  }
  return (
    <div>
      <input type="text" placeholder='请输入姓名' ref={myRef}/>
      <button onClick={showName}>点我提示姓名</button>
    </div>
  )
}

Demo2.jsx --- 类式组件中使用

import React, { Component, createRef } from 'react'

export default class Demo2 extends Component {
  showName = () => {
    const {value} = this.refs.myRef
    console.log(value);
  }

  myRef2 = (element) => {
    this.myRef2 = element
  }
  showName2 = () => {
    const {value} = this.myRef2
    console.log(value);
  }

  showName3 = () => {
    const {value} = this.myRef3
    console.log(value);
  }

  myRef4 = createRef()
  showName4 = () => {
    const {value} = this.myRef4.current
    console.log(value);
  }

  render () {
    return (
      <div>
        <input type="text" placeholder='请输入姓名' ref="myRef" />
        <button onClick={this.showName}>点我提示姓名</button>
        <hr />
        <input type="text" placeholder='请输入姓名' ref={this.myRef2} />
        <button onClick={this.showName2}>点我提示姓名</button>
        <hr />
        <input type="text" placeholder='请输入姓名' ref={c => this.myRef3 = c} />
        <button onClick={this.showName3}>点我提示姓名</button>
        <hr />
        <input type="text" placeholder='请输入姓名' ref={this.myRef4} />
        <button onClick={this.showName4}>点我提示姓名</button>
      </div>
    )
  }
}