react-生命周期与组件传参

特点

构建用户界面的javascript库

单向数据流
生命周期
虚拟dom
hooks

 react的组件

 函数组件

function App(){
    return <div> ...</div>
}
export default App;

 函数组件

import React，{Component} from 'react'

class App extents Component{
   constuctor(props){
    super(props)
    }
   state={num:5}
  render(){
     return <div></div>
  }
}

区别

函数组件通常展示
类组件通常作为容器

 类组件可以有state，管理数据用类组件
函数组件没有state

 函组件没有this
类组件有this

 函数组件没有生命周期
类组件有生命周期

事件

和原生js事件一致 事件命名用驼峰式
onclick   onClick
onmouseover  onMouseover

 事件总是要响应一个函数

<h1 oncClick={()=>{ alert("abc")}}>
事件响应 箭头函数

 doit = ()=>{ alert("你好")}

<h1 onClick={this.doit}>
事件响应定义好的函数

 事件传参
    <h1 onClick={()=>{this.add(参数)}}>
    <h2 onClick={this.add.bind(this,参数)}>

state

react组件的状态/数据
this.setState({k:新的值})

当state发生变化,引用state的视图会自动更新

表单的数据绑定

<input  value={this.state.msg} onChange={this.changeMsg}>

changeMsg=e=>this.setState({msg:e.target.value})

组件

定义组件
        src/components/Steper.js
在App.js导入组件
        import Steper from './components/Steper'

在App.js render函数中使用
        <Steper></Steper>
        组件名称的首字母必须大写

组件传参

 父传子 props

父组件传递
        <Steper  num={5}>
子组件接收
        props.num

 默认参

Steper.defaultProps = {
    num:1
}

 子传父,执行父组件的传递过来的props回调函数
子传父:执行回调函数

 子传父

父组件 
        定义函数并把函数传递给子组件
        updateSize = (n)=>this.setState({size:n})
        <Steper updateSize={this.updateSize}>
子组件
        执行props.updateSize()
        相当于执行父组件的updateSize方法

组件的设计

容器组件

一个页面,一个容器组件
有state,处理state方法
数据中心,与数据处理组中心
类组件

 视图组件

显示内容,一个视图组件
只有props没有state
函数组件

 dom 引用

1. 导入创建dom 引用的方法
import {createRef} from 'react'
2. 创建dom引用
var inp = createRef()
3. 引用
<input ref={inp}>
4. 获取值
inp.current.value
inp.current 当前引用的dom节点

生命周期 

 三个阶段

挂载阶段

01 constructor 构造函数

02 static getDerivedStateFromProps

03 render 渲染函数

04 componentDidMount 组件已经挂载

 更新阶段

01 static getDerivedStateFromProps

02 shouldCompoentUpdate 组件是否更新(返回true才更新)

03 render 渲染

04 getSnapshotBeforeUpdate 更新前获取快照(返回值是componentDidUpdate第三个参数)

05 componentDidUpdate 组件已经更新

 卸载阶段

01 comcomponentWillUnmount卸载

import React, { Component } from 'react';
class Life extends Component {
    constructor(props) {
        super(props);
        // console.log("挂载-01-constructor");
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        // 当组件的props发送变化时候 ,执行回调函数
        // 当props更新用Props更新state
        // console.log("挂载:-02-getDerivedStateFromProps");
        console.log("更新:01-getDerivedStateFromProps")
        return nextProps;
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("更新:02 组件是否需要更新");
        return true; //通常用做优化组件,返回true更新,false不更新
    }
    state = { num: 5 }
    render() {
        // console.log("挂载:03-render选项")
        console.log("更新:03-render")
        return (<div>
            <h1>生命周期</h1>
            <button onClick={() => this.setState({ num: this.state.num + 1 })}>{this.state.num}</button>
        </div>);
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("更新:04 getSnapshotBeforeUpdate")
        // 获取组件的快照,在更新前
        // 返回的值是下个生命周期的第单个参数
        return { name: "mimu", age: 17 }
    }
    componentDidUpdate(prevProps, prevState, snap) {
        // 组件已经更新
        console.log("更新:05componentDidUpdate", snap)
    }
    componentDidMount() {
        // console.log("挂载-04 组件已经挂载")
        // 作用:操作dom,发起ajax ,添加事件,开启定时器
    }
    componentWillUnmount() {
        console.log("卸载01-componentWillUnmount")
    }
}

export default Life;