React 三大属性 state 、props、ref

react三大核心属性：state/props/ref

1、state

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

3. 更新state中的方法必须使用setState()函数进行更新 weather组件： import React, { Component } from 'react' import { Button } from 'antd'

   export default class Weather extends Component {
   
       state={
           weather:['阴','晴','多云'],
           count:0
       }
   
       changeWeather = ()=>{
           // console.log('changeWeather');
           let {count,weather} = this.state
           count+=1
           if(count===weather.length){
               count=0
           }
           this.setState({
               count
           })
       }
       render() {
           const {weather,count} = this.state
           return (
               <div>
                   <h2>天气:&nbsp;{weather[count]}</h2>&nbsp;
                   <Button type="primary" onClick= {this.changeWeather}>切换天气</Button>
               </div>
           )
       }
   }
   

   App组件： import React, { Component } from 'react' import Weather from './components/Weather' import 'antd/dist/antd.css'; export default class App extends Component { render() { return (

   ) } }

2、props

主要有两个作用：

1是父组件向子组件传值

2是父组件向子组件传递想法，子组件接受方法，并调用改方法

父组件：

import React, { Component } from 'react'
import List from '../List'

export default class Person extends Component {

    state = {
        person: {
            id:'001',
            name: 'aaa',
            age: '18'
        }
    
    }
    updatePerson = (values)=>{
        console.log("Person",values);
        this.setState({
            person:values
        })
    }
    render() {
        const { id, name, age } = this.state.person
        return (
            <div>
                {/* <List id={id} name={name} age={age} /> */}
                {/* <List {...this.state.person} /> */}
                <List person = {this.state.person}  updatePerson = {this.updatePerson} />
            </div>
        )
    }
}

子组件：

import { Button } from 'antd'
import React, { Component } from 'react'

export default class List extends Component {

    updatePerson = (values) => {
        const {updatePerson} = this.props
        return ()=>{
            // console.log(values);
            updatePerson(values)
        }
    }
    render() {
        const { id, name, age, } = this.props.person
        
        return (
            <div>
                <div><h2>id:{id}</h2></div>
                <div><h2>name:{name}</h2></div>
                <div><h2>age:{age}</h2></div>
                <Button onClick={this.updatePerson({ id: '110', name: '小花', age: '100' })}>点我</Button>
            </div>
        )
    }
}

3、ref

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

export default class List extends Component {

    //字符串类型ref
    // showData = () => {
    //     const { input } = this.refs
    //     alert(input.value)
    // }

    //回调函数形式
    // showData = () => {
    //     const { input } = this
    //     alert(input.value)
    // }
   
    //createRef方式
    myRef = createRef()
    showData = () => {
        alert(this.myRef.current.value);
    }
    render() {

        //字符串类型ref
        //  <div>
        //     <input ref="input" type="text" placeholder="点击按钮提示数据" />&nbsp;
        //     <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        // </div>
        //回调函数形式
        //     return <div>
        //                 <input ref={c => this.input = c} type="text" placeholder="点击按钮提示数据" />&nbsp;
        //                 <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        //             </div>

        return <div>
                    <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
                    <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                </div>
    }
}