学习react第六天

学习react第六天

react的生命周期函数

1. 更新的时候 constructor>render>componentMount；

• 2.修改的时候 render>componentUpdate
  • 1.更新setState的时候render重新渲染会调用render和componentDidUpdate这两个方法
  • 2.Props如果子组件接收了父组件的数据而父组件使用（setState）的数据改变了那么子组件的render也会触发
  • 3.forceUpdate 调用这个方法不管页面有没有更新都会导致重新渲染类似于页面刷新（强制页面更新）

3. 销毁的时候 component

// 父组件
class LifeFun  extends react.Component{
  // 初始化state和绑定的this
  constructor(){
    super()
    this.state={
      name:"shen",
    }
  }
  update=()=>{
  this.setState({
    name:"li"
  })
  this.forceUpdate();
  }
  // 页面渲染的时候
 render(){
  //  注意不能在render调用setState发给发
   console.log("这是生命周期函数2")
   return (<span>{this.state.name}<button onClick={this.update}>点击改变数据</button> <Child name={this.state.name} ></Child></span>)
 }
//  1.发送网络请求
//  2. DOM操作
// 页面挂载的时候
 componentDidMount(){
   console.log("3")
 }
//  数据更新的时候
 componentDidUpdate(){
   console.log("页面更新的时候触发")
 }
 
}

// 子组件
class Child extends react.Component{
  render(){
    console.log("@")
    return (<span>{this.props.name}子组件</span>)
  }
  componentDidUpdate(){
    console.log("子组件页面重新渲染了")
  }
  componentWillUnmount(){
    console.log("页面销毁的时候")
  }
}

LifeFun.propTypes={
  name:propsTypes.string
}

reactDOM.render(<LifeFun></LifeFun>,document.querySelector("#root"))

组件的复用 props的render和childrne方法

使用render复用组件

//  1.创建复用组件，提供逻辑状态代码
//  2.将状态（数据）使用render 暴露在组件外部  render(){return this.props.render(state)}
//  3.render(){return data}render可以将数据暴露在外部使用 
// 这个是render方法
export default class Mouse extends react.Component{
  state={
    x:0,
    y:0,
  }
  mover=(e)=>{
    this.setState({
      x:e.pageX,
      y:e.pageY
    })
  }
  componentDidMount(){
    window.addEventListener("mousemove",(e)=>{
      this.mover(e)
    })
  }
  render(){
    return this.props.render(this.state)
  }
}
  reactDOM.render(<Mouse render={(state)=>{return (<div><p>Y:{state.x},X:{state.y}</p><img src='https://img2.baidu.com/it/u=2108319215,1494231136&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=690' style={{width:50+"px",position:'absolute',left:`${state.x-25}px`,top:`${state.y-34.5}px`}}></img></div>)}}></Mouse>,document.querySelector("#root")) 

使用children方法复用组件

//  1.创建复用组件，提供逻辑状态代码
//  2.将状态（数据）使用render 暴露在组件外部  render(){return this.props.render(state)}
//  3.render(){return data}render可以将数据暴露在外部使用 
// 推荐把render替换成children方式
// 把render替换成children
export default class  ReplaceMouse extends react.Component{
  state={
    x:0,
    y:0,
  }
  mover=(e)=>{
    this.setState({
      x:e.pageX,
      y:e.pageY
    })
  }
  componentDidMount(){
    window.addEventListener("mousemove",(e)=>{
      this.mover(e)
    })
  }
  render(){
    // 如果使用childrne方法就把 this.props.render(this.state)替换成 this.props.children(this.state)
    return this.props.children(this.state)
  }
}
reactDOM.render(<ReplaceMouse >{(data)=>{return <p>
Y:{data.y}-X:{data.x}
</p>}}</ReplaceMouse>,document.querySelector("#root")) 

高阶组件的初次使用

// 高阶组件hoc
// 高阶组件:是一个函数，接收包装的组件，返回增强后的组件

创建步骤

1. 创建一个函数，名称定位wite（也可以是其他名字）
2. 指定函数的参数，参数大写字母（作为要渲染的组件）
3. 在函数内部创建一个类组件，提供复用（状态（数据）的逻辑代码），并返回
4. 在render返回函数的参数（组件） render(){returb }可以传入props数据
5. 传入数据后 在 渲染组件里面通过props调用数据
6. 通过函数名字 mouse(App) 增强组件 通过返回值拿到组件 let Mouse=mouse(App) 在通过Mouse渲染到页面上

// 创建高阶组件HOC 复用组件
function mouse(Component){
  class Mouse extends react.Component{
    constructor(){
      super();
      this.name="shen"
    }
    state={
      x:null,
      y:null,
    }
    hand(e){
      this.setState({
        x:e.pageX,
        y:e.pageY,
      })
    }
    componentDidMount(){
      window.addEventListener("mousemove",(e)=>{
        this.hand(e)
      })
    }
    render(){
      // 这里返回id时候函数里面的参数是一个组件
      return <Component {...this.state} name={this.name}></Component>
    }
  }
  return Mouse
}


// 页面的渲染
const App=(props)=>{
  return (<span>{props.x}-{props.y}-{props.name}</span>)
}

let Mouse=mouse(App)
reactDOM.render(<Mouse></Mouse>,document.querySelector("#root"))