React组件的三大属性

最新推荐文章于 2024-05-20 16:37:44 发布

原创最新推荐文章于 2024-05-20 16:37:44 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文详细介绍了React中组件的状态管理，包括如何初始化和更新state，以及使用bind和箭头函数处理事件。同时，讲解了props的使用，强调其只读特性，并展示了如何设置props的类型限制和默认值。最后，探讨了refs的三种用法，包括字符串形式、回调函数形式以及createRef()方法，用于获取和操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、state

class MyComponent extends React.Component {
        constructor(props) {
          // 固定写法
          super(props)

          // 初始化state
          this.state = { flag: true, manner: '你是对的' }

          // bind() 返回一个被指定当前this的新函数
          this.changeManner = this.changeManner.bind(this)
        }

        render() {
          const { flag, manner } = this.state
          return <h1 onClick={this.changeManner}>{flag ? manner : '我是错的'}</h1>
        }

        changeManner() {
          const flag = this.state.flag
          // state必须通过setState进行更新(指定值)
          this.setState({ flag: !flag })
        }
      }
      // 渲染虚拟DOM到页面
      ReactDOM.render(<MyComponent />, document.getElementById('test'))

简化形式

class MyComponent extends React.Component {
    state = { flag: true, manner: '你是对的' }

    changeManner = () => {
        const flag = this.state.flag
        // state必须通过setState进行更新(指定值)
        this.setState({ flag: !flag })
    }

    constructor(props) {
        // 固定写法
        super(props)
    }

    render() {
        const { flag, manner } = this.state
        return <h1 onClick={this.changeManner}>{flag ? manner : '我是错的'}</h1>
    }
}
// 渲染虚拟DOM到页面
ReactDOM.render(<MyComponent />, document.getElementById('test'))

二、props

注意：props是只读的

class Person extends React.Component {
    render() {
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{age}</li>
                <li>年龄：{sex}</li>
            </ul>
        )
    }
}

1、基本使用

（1）属性形式

ReactDOM.render(<Person name="ouyuming" age={19} sex="男" />, document.getElementById('test'))

（2）对象形式

const p1 = { name: 'lxying', age: 18, sex: '男' }
ReactDOM.render(<Person {...p1} />, document.getElementById('test2'))

2、属性限制

（1）引入prop-types.js

<script type="text/javascript" src="../js/prop-types.js"></script>

（2）propTypes

类属性，对传入的prop进行类型限制

PropTypes, 验证器类

static propTypes = {
    // 字符类型，必须传入
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
    // 函数类型
    study: PropTypes.func
}

（3）defaultProps

指定传入的prop默认值

static defaultProps = {
    sex: '男',
    age: 16
}

3、函数组件使用props

function Person(props) {
    const { name, age, sex } = props
    return (
        <ul>
            <li>姓名：{name}</li>
            <li>性别：{age}</li>
            <li>年龄：{sex}</li>
        </ul>
    )
}

Person.propTypes = {
    // 字符类型，必须传入
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
    // 函数类型
    study: PropTypes.func
}

Person.defaultProps = {
    sex: '男',
    age: 16
}

ReactDOM.render(<Person name="wanger" />, document.getElementById('test'))

三、refs

1、字符串形式的ref

class MyComponent extends React.Component {
    show1 = () => {
        const { input1 } = this.refs
        console.log(input1)
    }

    show2 = () => {
        const { input2 } = this.refs
        console.log(input2)
    }

    render() {
        return (
            <div>
                <input onBlur={this.show1} type="text" ref="input1" placeholder="input1" />
                <br />
                <input onBlur={this.show2} type="text" ref="input2" placeholder="input2" />
            </div>
        )
    }
}

ReactDOM.render(<MyComponent />, document.getElementById('test'))

2、回调韩式形式的ref

（1）内联函数

在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素

show1 = () => {
    const { input1 } = this
    console.log(input1)
}

show2 = () => {
    const { input2 } = this
    console.log(input2)
}

render() {
    return (
        <div>
            <input onBlur={this.show1} type="text" ref={e => (this.input1 = e)} placeholder="input1" />
            <br />
            <input onBlur={this.show2} type="text" ref={e => (this.input2 = e)} placeholder="input2" />
        </div>
    )
}

（2） class 的绑定函数

show1 = () => {
    console.log(this.input1)
}

save = e => {
    this.input1 = e
    console.log(this.input1)
}

render() {
    return (
        <div>
            <input onBlur={this.show1} type="text" ref={this.save} placeholder="input1" />
        </div>
    )
}

3、createRef()

myRef1 = React.createRef()
myRef2 = React.createRef()

show1 = () => {
    console.log(this.myRef1.current)
}

show2 = () => {
    console.log(this.myRef2.current)
}

render() {
    return (
        <div>
            <input onBlur={this.show1} type="text" ref={this.myRef1} placeholder="input1" />
            <br />
            <input onBlur={this.show2} type="text" ref={this.myRef2} placeholder="input2" />
        </div>
    )
}