react笔记3

vscode react 插件

4、Effect Hook
5、Ref Hook

6、Fragment
//自己总结： Fragment使得Dom结构少包一个div 也可在App里写 可以有标签属性
// 也可以用空标签 <></> 不过不能写标签属性
import React, { Component, Fragment } from ‘react’

export default class Demo extends Component {
render() {
return (




)
}
}

7、context

PurComponent

import React, { PureComponent } from 'react'

import './index.css'
export default class Parent extends PureComponent {
  state = { carName: '奔驰C63', stu: ['aa', 'bb', 'cc'] }

  addStu = () => {
    // const {stu} = this.state
    // stu.shift('dd')
    // this.setState({ stu }) // 不可

    const { stu } = this.state
    this.setState({ stu: ['dd', ...stu] })
  }

  changeCar = () => {
    // 不对的写法
    // const obj = this.state // 引用地址的传递 还是原来的对象
    // obj.carName = '迈巴赫'
    // console.log(obj === this.state);
    // this.setState(obj)

    this.setState({ carName: '迈巴赫' }) // 新对象
  }

  // shouldComponentUpdate(nextProps,nextState){
  //   console.log(this.props,this.state); // 目前的props和state
  //   console.log(nextProps,nextState);// 接下要变化的目标props，目标state
  //   return !this.state.carName === nextState.carName
  // }

  render() {
    console.log('parent-render');

    const { carName, stu } = this.state
    return (
      <div className='parent'>
        <h3>我是Parent组件</h3>
        <span>我的车名是：{carName}</span>
        {stu}


        <button onClick={this.changeCar}>点我换车</button>
        <button onClick={this.addStu}>点我添加dd</button>

        <Child carName='奥拓' />
      </div>
    )
  }
}
class Child extends PureComponent {

  // 阀门 PureComponent底层原理
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log(this.props, this.state); // 目前的props和state
  //   console.log(nextProps, nextState);// 接下来要变化的目标props，目标state
  //   // if(this.props.carName === nextProps.carName) return false
  //   // else return true
  //   return !this.props.carName === nextProps.carName
  // }

  render() {
    console.log('child-render');
    return (
      <div className='child'>
        <h3>我是Child组件</h3>
        <span>我接到的车名是：{this.props.carName}</span>

      </div>
    )
  }
}

插槽 render props

import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {
  render() {
    return (
      <div className='parent'>
        <h3>Parent组件</h3>
        <A render={(name)=><B name={name}/>}/>
      </div>
    )
  }
}

class A extends Component {
  state = {name:'tom'}
  render() {
    console.log(this.props);
    const { name} = this.state
    return (
      <div className='a'>
        <h3>A组件</h3>
        {this.props.render(name)}
      </div>
    )
  }
}
class B extends Component {
  render() {
    return (
      <div className='b'>
        <h3>B组件{this.props.name}</h3>
      </div>
    )
  }
}

打包以及安装服务器
npm run build
安装一个服务器 npm i serve -g
serve build。 （build是想以哪个文件夹啊作为根路径）

错误边界 getDeriveStateFromError componentDidCatch

组件间通信方式总结

Router6版本与5版本的对比

BrowerRouter HashRouter 和五版本是一致的

Hooks
useRoutes()


useNavigate()

useParams()

useSearchParams()

useLocation()

useMatch()