react学习笔记(4)

1.props与属性验证

父组件内容

import React, { Component } from 'react'
import Navbar from './Navbar/index.js'

export default class App extends Component {
  render() {
    return (
      <div>
        <div>
            <h2>首页</h2>
            <Navbar title="首页" leftshow={false}/>
        </div>
        <div>
            <h2>列表</h2>
            <Navbar title="列表" leftshow={true}/>
        </div>
        <div>
            <h2>购物车</h2>
            <Navbar title="购物车" leftshow={true}/>
        </div>
      </div>
    )
  }
}

Navbar组件内容

import React, { Component } from 'react'

export default class Navbar extends Component {
  render() {
      let {title , leftshow} = this.props
    return (
      <div>
        {leftshow && <button>返回</button>}
        navbar - {title}
        <button>home</button>
      </div>
    )
  }
}

父组件传参方式和vue一样，子组件接收参数方式为在render函数内写let{XXX} = this.props

此处需要注意，父组件给子组件传参的时候引号“”内部的内容为字符串格式，若要使用布尔值等等，需要添加花括号{}，转换为js的地盘

倘若render中定义了或者由父组件传来了

    var obj = {
      title: "购物车",
      leftshow:false
    }

则可以这样写

   <div>
            <h2>购物车</h2>
            <Navbar title={obj.title} leftshow={obj.leftshow}/>
        </div>

如果该对象中的值和Navbar需要的一样，可以简写成这种格式

        <div>
            <h2>购物车</h2>
            <Navbar {...obj}/>
        </div>

2.属性vs状态

相似点:都是纯js对象,都会触发render更新,都具有确定性(状态/属性相同，结果相同)

不同点:

1.属性能从父组件获取，状态不能

2.属性可以由父组件修改,状态不能

3.属性能在内部设置默认值，状态也可以，设置方式不一样

4.属性不在组件内部修改,状态要在组件内部修改

5.属性能设置子组件初始值,状态不可以

6.属性可以修改子组件的值，状态不可以

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

props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的props ，否则组件的props 永远保持不变。没有state 的组件叫无状态组件(stateless component)， 设置了state的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。

3.状态(state)

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)

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

export default class App extends Component {
    state = {
        // mytext : "收藏"
        myshow:1
    }
  render() {
    return (
      <div>
        <h1>欢迎来到vue开发</h1>
        <button onClick={()=>{
            // this.state.mytext = "取消"
            this.setState({
                // mytext:'取消'
                myshow:!this.state.myshow
            })//间接修改项目
            if(this.state.myshow){
                console.log("收藏的逻辑")
            }else{
                console.log("取消收藏的逻辑")
            }
        }}>{this.state.myshow?"收藏":"取消"}</button>
      </div>
    )
  }
}

或者采用这样的方式

export default class App extends Component {
    constructor(){
      super()              // 因为Component所以需要继承
      this.state = {
            mytext:"收藏",
            myshow:1
        }
    }
  render() {
    return (
      <div>
        <h1>欢迎来到vue开发</h1>
        <button onClick={()=>{
            // this.state.mytext = "取消"
            this.setState({
                // mytext:'取消'
                myshow:!this.state.myshow
            })//间接修改项目
            if(this.state.myshow){
                console.log("收藏的逻辑")
            }else{
                console.log("取消收藏的逻辑")
            }
        }}>{this.state.myshow?"收藏":"取消"}</button>
      </div>
    )
  }
}

setState函数在异步的逻辑中，是同步更新状态在同步的逻辑中，是异步更新状态

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

            this.setState({
                myshow:!this.state.myshow
            },()=>{
                //这里写状态和dom更新完后的操作
            })

想要render函数执行，需要有setState更新