前言

个人主页: 阿选不出来

个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记.

目前开发的专栏: JS VueReact

【React】组件三大核心属性

• 前言
• 1.state
• • setState
  • 2.props
  • • 对props进行限制
    • 对props设置默认值
    • state与props的区别
    • 3.ref

      1.state

      state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）。

      组件被成为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）。

      一、定义state，访问state

      写法一（常用、简写）

      直接向class App添加state属性

      import React, { Component } from 'react'export default class App extends Component {    // ====定义state写法一====    state = {        isCollect: false,        myname:"Kerwin"    }  render() {    return (              
      欢迎来到react开发-{this.state.myname}
                )  }}

      写法二（了解）

      使用构造器，初始化一个state属性

      import React, { Component } from 'react'export default class App extends Component {    // ====定义state写法二====   constructor(){        super()        this.state = {            isCollect:false,            myname:"Kerwin"        }    }   render() {    return (              
      欢迎来到react开发-{this.state.myname}
                )  }

      二、修改state

      想要修改state中的数据，我们就需要自定义一个修改state的方法。

      如何自定义这个方法并且调用？

      关键点在于，this指向应为App这个类的实例对象

      ...render(){    {/* 法一 */}    this.handleAddClick}add    {/* 法二 */}    this.handleDelClick(index)}delete}handleAddClick= ()=>{}handleDelClick(){}

      如何修改state对象中的数据?

      state状态数据，不支持直接修改或更新！需要借助setState！

      setState

      this.state 是纯js对象，在Vue中，data属性是利用object.defineProperty 处理过的，更改data的数据的时候会触发数据的getter和setter，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法 setState。

      实例：

      修改state.isHot 的值。

      ...state = {isHot: true,wind: '微风'}render(){    return (            this.changeWeather}天气：{this.state.isHot}-{this.state.wind}            )}...changeWeather = ()=>{    const isHot = this.state.isHot    this.setState({isHot:!isHot})}...

      此处state被修改后的结果为： state = {isHot: false, wind:'微风'}

      setState可以更新state ,且更新是一种合并不是替换！

      特别注意：不能直接修改状态（state），可能会造成不可预期的后果！

      扩展：

      假如state属性中存有一个数组，如何修改这个数组的值呢？

      state = {    list: ['aaa','bbb','ccc']}

      切记不能写成这样!!

      const newlist = this.state.listnewlist.push('ddd')

      解决办法：

      由于我们不能直接修改state中的数据，所以需要将 list 这个数组深复制一份，对复制得来的新数组进行修改并使用setState传入。

      //法一const newlist = [...this.state.list]//法二const newlist = this.state.list.concat()//法三const newlist = this.state.list.slice()//...

      setState更新状态不总是异步的。

      setState还接收第二个参数，第二个参数是回调函数，当状态和 dom更新完后就会被触发。

      2.props

      props是从外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式传入新的 props。

      1.传递单个属性

      在组件上采用 key=value的形式写下属性，子组件通过 this.props获取属性。

      const {name} = this.props

      2.批量传递属性

      使用展开运算符

      const p = {name:'Alice',age:23,sex:'女'}......p}

      注意：在原生js下，使用展开运算符展开一个对象，这种写法是会报错的。

      但在babel和react的影响下，这种写法不会报错，展开运算符也可以展开一个对象了，但仅仅适用于标签语法中。

      对props进行限制

      首先需要引入

      import PropTypes from 'prop-types'

      写法一：

      写在类的内部

      static propTypes = {    '标签属性'：'限制'}

      写法二：

      写在类的外部

      类名.propTypes = {//...}

      对标签属性进行类型限制

      import PropTypes from 'prop-types'...static propTypes = {name: PropTypes.string, //限制name属性为字符串类型age: PropTypes.number, //限制age为数值 speak: PropTypes.func, //限制speak为函数    isStudent: PropTypes.bool, //限制isStudent为布尔值}

      对属性进行必要性限制

      PropTypes.string.isRequired 

      对props设置默认值

      引入

      import PropTypes from 'prop-types'

      写法一：

      写在类的内部

      static defaultProps = {    标签属性：默认值}

      写法二：

      写在类的外部

      类名.defaultProps = {//...}

      例：

      import PropTypes from 'prop-types'...static propTypes = {age:18 //默认age为18}

      props 不能在子组件修改!!!

      state与props的区别

      state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件内部初始化，可以被组件自身修改，而外部不能修改也不能访问。你可以认为 state是一个局部的、只能被组件自身控制的数据源。 state中状态可以通过 this.setState方法进行更新，setState会导致组件的重新渲染。

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

      没有 state的组件叫无状态组件（stateless component），设置了state的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态地组件。这样会降低代码维护地难度，也会在一定程度上增强组件的可复用性。

      3.ref

      1. 给标签设置ref=“username”

         ​ 通过这个获取this.refs.username，ref可以获取到应用的真实dom。

      2. 给组件设置ref=“username”

         ​ 通过这个获取this.refs.username，ref可以获取组件对象。

      3. 新的写法

         myRef = React.createRef()...this.myref}hello()={         //访问        console.log(this.myref.current)    }}> 

      React.createRef调用后可以返回一个容器，该容器可以存储被Ref所标识的节点，该容器“专人专用”。