react-state-props相关

一、属性(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')
)

1、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'
  }

2、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')
)

 

 

3、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>
          )
      }
  }

   

二、状态(state)

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

绑定步骤：

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

1. 定义state
   方式1
   

   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')
   )

   
   
2. setstate
   this.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)

      

      

      

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

　　

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

state

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

props

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

 

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