react之组件数据挂在方式

最新推荐文章于 2024-10-19 15:43:56 发布

cypking

最新推荐文章于 2024-10-19 15:43:56 发布

阅读量38

点赞数

文章标签： react.js arcgis 前端前端框架 javascript

本文链接：https://blog.csdn.net/cypking/article/details/133041113

版权

本文详细介绍了React中组件间的交互方式，包括props的使用，如何设置默认props，以及props与state的区别。同时，文章探讨了如何在React中实现状态管理，特别是state的更新与控制，并讲解了受控组件和非受控组件的概念及其应用场景。此外，文中还强调了在组件设计中props和state的最佳实践，提倡减少state的使用，充分利用props进行数据传递。

摘要由CSDN通过智能技术生成

1、属性(props)

组件间传值，在React中是通过只读属性 props 来完成数据传递的。
props：接受任意的入参，并返回用于描述页面展示内容的 React 元素。

import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
  render () {
    return (
  		<h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}

const Content = (props) => {
  return (
    <p>{props.name}是一个构建UI的库</p>
  )
}

class App extends Component {
  render () {
    return (
  		<Fragment>
      	<Title name="React" />
        <Content name="React.js" />
      </Fragment>
  	)
  }
}

ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

props默认值
由于设置了defaultProps，不传props也能正常运行，如果传递了就会覆盖defaultProps的值

类组件

import React,{Component,Fragment} from 'react'
import ReactDOM from 'react-dom'
 class Title extends Component{
     static defaultProps={
         name:'zh'
     }
     render(){
         return(
             <h1>{{this.props.name}}</h1>
         )
     }
 }

函数组件

const Content =(props)=>{
    return (
        <p>{{props.name}}</p>
    )
}
Content.defaultProps={
    name:'fasgd'
}

props.children
我们知道使用组件的时候，可以嵌套。要在自定义组件的使用嵌套结构，就需要使用 props.children 。在实际的工作当中，我们几乎每天都需要用这种方式来编写组件。

import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
render () {
    return (
        <h1>欢迎进入{this.props.children}的世界</h1>
    )
}
}

const Content = (props) => {
return (
    <p>{props.children}</p>
)
}

class App extends Component {
render () {
    return (
        <Fragment>
        <Title>React</Title>
        <Content><i>React.js</i>是一个构建UI的库</Content>
    </Fragment>
    )
}
}

ReactDOM.render(
    <App/>,
document.getElementById('root')
)

prop-types检查props
React其实是为了构建大型应用程序而生, 在一个大型应用中，根本不知道别人使用你写的组件的时候会传入什么样的参数，有可能会造成应用程序运行不了，但是不报错。为了解决这个问题，React提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types:

npm i prop-types -S
- 类型： array、bool、func、number、object、string
- React元素类型：element
- 必填项：isRequired
- 特定结构的对象： shape({})
- 函数组件
```
import PropTypes from 'prop-types'
const Content=(props)=>{
    let {a,b}=props
    return (
        <div>{a}{b}</div>
    )
}
Content.propTypes={
    a:PropTypes.number,
    b:PropTypes.number
}
```
- 类组件
```
import PropTypes from 'prop-types'
class Conetnt extends Component{
    static propTypes={
        a:PropTypes.number,
        b:PropTypes.number
    }
    render(){
        let {a,b}=this.props
        return(
            <div>
            </div>
        )
    }
}
```

2、状态(state)

将state与表单项中的value值绑定在一起，有state的值来控制表单元素的值，称为受控组件。
绑定步骤：

在state中添加一个状态，作为表单元素的value值
给表单元素绑定change事件，将表单元素的值设置为state的值

定义state方式一：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {

state = {
    name: 'React',
    isLiked: false
}

render () {
    return (
    <div>
        <h1>欢迎来到{this.state.name}的世界</h1>
        <button>
        {
            this.state.isLiked ? '❤️取消' : '🖤收藏'
        }
        </button>
    </div>
    )
}
}
ReactDOM.render(
    <App/>,
document.getElementById('root')
)

方式二(推荐)：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
constructor() {
    super()
    this.state = {
        name: 'React',
        isLiked: false
    }
}
render () {
    return (
        <div>
        <h1>欢迎来到{this.state.name}的世界</h1>
        <button>
        {
            this.state.isLiked ? '❤️取消' : '🖤收藏'
        }
        </button>
    </div>
    )
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)

setstatethis.props和this.state是纯js对象,在vue中，data属性是利用Object.defineProperty处理过的，更改data的数据的时候会触发数据的getter和setter，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setState。
- 第一个参数可以是对象
- 可以是方法return一个对象，我们把这个参数叫做updater
- 参数是对象
```
this.setState({
    isLiked: !this.state.isLiked
})
```
- 参数是方法
  参数1:上一次的state
  参数2:props
```
this.setState((prevState, props) => {
    return {
        isLiked: !prevState.isLiked
    }
})
```
setState是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数
```
this.setState((prevState, props) => {
return {
    isLiked: !prevState.isLiked
}
}, () => {
    console.log('回调里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)
```

3、属性(props)VS状态(state)

相似点：都是纯js对象，都会触发render更新，都具有确定性(状态/属性相同，结果相同)
不同点：
1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以
4. 属性不在组件内部修改，状态要改
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以

state

作用:用于组件保存、控制、修改自己的可变状态。
组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。
中状态可以通过 this.setState方法进行更新，setState 会导致组件的重新渲染。

props

作用:让使用该组件的父组件可以传入参数来配置该组件。
它是外部传进来的配置参数，组件内部无法控制也无法修改。
除非外部组件主动传入新的 props，否则组件的 props 永远保持不变

注意：尽量少地用 state，多用 props。如果有多个组件共享一个数据，把这个数据放到共同的父级组件中来管理。

4、受控组件与非受控组件

受控组件

将state与表单项中的value值绑定在一起，state的值来控制表单元素的值，称为受控组件。
步骤：

在state中添加一个状态，作为表单元素的value值
给表单元素绑定change事件，将表单元素的值设置为state的值

```
<input type="text" value={this.state.username} onChange={this.inputChange.bind(this)} />

注：多表单元素需优化事件方法
this.setState({
    [e.target.name]: e.target.value
})
```

非受控组件

没有和state数据源进行关联的表单项，而是 借助ref，使用元素DOM方式获取表单元素值
步骤:

调用 React.createRef() 方法创建ref对象
将创建好的 ref 对象添加到文本框中
通过ref对象获取到文本框的值

```
import React {Component} from 'react' //1
export default class User extends Component {
    constructor(props){
        super(props)
        <!-- 定义一个引用 -->
        this.username=React.createRef() //2
    }
    render(){
        return{
            <div>
                <input type='text' ref={this.username}/>//3
                <button onClick={this.addUser.bind(this)}></button>
            </div>
        }
    }
    addUser(){
        console.lof(this.username.current.value)//4
    }
} 
```