react基础语法、组件传参、生命周期

特点

• 构建用户界面的Javascript库
• Facebook脸书出品
• 组件化、单向数据流、生命周期、虚拟dom、hooks

jsx语法
方便js中书写html模板JavaScript与html混合写法

• 只有一个根节点
• {} js表达式
• {/* 注释内容 */}
• className 定义类名
• 样式对象会自动展开
• 数组可以包含html，并自定义展开

react的组件

• 函数组件

function App(){
  return <div>...</div>
}
// 导出组件
export default App;

• 类组件

import React ,{Component} from 'react'

class App extends Component{
  constructor(props)
  super(props)
}
state = {num:5}
render(){
  return <div></div>
}
export default App

• 区别
  1、函数组件通常展示；类组件通常作为容器
  2、类组件可以有state，管理数据用类组件；函数组件没有state
  3、函数组件没有this；类组件有this
  4、函数组件没有生命周期；类组件有生命周期

模板语法

• 文本渲染
• 条件渲染
• 列表渲染

function App(){
    // 定义一个样式对象
    var styles = {
        fontSize:"48px",
        textAlign:"center",
        color:"green"
    }
    var isLog = true;
    var list = ["react","vue","angular","jquery"]
    var str1 = "我爱我的祖国"
    var str2 = "<p>一定要解放<strong>台湾</strong></p>"
    return (<div>
        <h1>文本渲染</h1>
        <div style={styles}>{str1}</div>
        <div dangerouslySetInnerHTML={{__html:str2}}></div>
        <h1>列表渲染</h1>
        {
            list.map(item=>(<p key={item}>{item}</p>))
        }
        <h1>模板语法-条件渲染</h1>
        {isLog&&<h3>欢迎回来</h3>}
        {isLog?<h3>欢迎回来主人</h3>:<h3>请登录</h3>}
    </div>)
}

export default App

事件

• 和原生js事件一致，事件命名用驼峰式
• 事件总是要响应一个函数
• 事件传参

import React, { Component } from 'react'; // imrc
class App extends Component { // ccc
    constructor(props) {
        super(props);
        this.state = {num:5}
    }
    say=()=>{
        alert("钓鱼岛是中国的")
    }
    doit=(msg)=>{
        alert("我爱"+msg)
    }
    add=(n=1)=>{
        // state更新必须由setState方法进行
        this.setState({num:this.state.num+n})
    }
    render() { 
        return ( <div>
            <h1>更新状态</h1>
            <button onClick={()=>this.add}>{this.state.num}</button>
            <button onClick={()=>{this.add(2)}}>{this.state.num}：传参</button>
            <button onClick={this.add.bind(this,5)}>{this.state.num}：传参</button>
            <h1>添加事件</h1>
            <p onClick={()=>alert("坐高铁去台北")}>解放台湾</p>
            <p onClick={this.say}>钓鱼岛</p>
            <p onClick={()=>this.doit("祖国")}>祖国--传参</p>
            <p onClick={this.doit.bind(this,"河南")}>河南--传参</p>
            <p> <button>{this.state.num}</button></p>
        </div> );
    }
}
export default App;

state
react组件的状态/数据，当state发生变化，引用state的视图会自动更新。

表单的数据绑定

组件

• 定义组件
• 在App.js导入组件；在App.js render函数使用
• 组件名称的首字母必须大写

组件传参

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

• 默认参
  Steper.defaultProps={
  num:1
  }

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

  —组件Steper—

import React, { Component } from 'react';
class Steper extends Component {
    constructor(props) {
        super(props);
        this.state={
            // count的默认值是props的num值
            count:props.num, // props父组件传来的
            steps:props.step,
            mins:props.min,
            maxs:props.max,
        }
    }
    // 给表单定义双向绑定
    updateCount= e=>{
        this.setState({count:e.target.value})
        // 执行父组件的updateSize方法
        this.props.updateSize(e.target.value)
    }
    render() { 
        return ( <span>
            <button 
            disabled = {this.state.count<=this.state.mins}
            onClick={()=>{
                this.setState({count:this.state.count*1-1},()=>{
                    this.props.updateSize(this.state.count)
                })
            }}>-</button>
            <input type="text"
            onChange={this.updateCount}
            value={this.state.count} />
            <button 
            disabled = {this.state.count>=this.state.maxs}
            onClick={()=>{
                this.setState({count:this.state.count*1+this.state.steps},()=>{
                    this.props.updateSize(this.state.count)
                })
            }}>+</button>
        </span> );
    }
}
 
// 定义默认参数
Steper.defaultProps={
    num:1,
    step:1,
}

export default Steper;

// 组件要求首字母大写

—父组件App—

import React, { Component } from 'react';
// 导入组件
import Steper from './components/Steper';
class App extends Component {
    state = { 
        msg:"",
        size:100,
        step:1,
        min:5,
        max:199,
     }
    // 父组件定义一个更新size的方法
    updateSize= n=>this.setState({size:n})
    render() { 
        return ( <div>
            <Steper 
            updateSize = {this.updateSize}
            num={this.state.size} 
            step={this.state.step}
            min={this.state.min}
            max={this.state.max}></Steper> <br />
            <Steper num={10}></Steper> <br />
            <Steper></Steper>
            <div style={{border:"3px solid red",
                width:this.state.size+"px",
                height:this.state.size+"px"}}>
                {this.state.size}
            </div>
        </div> );
    }
}
 
export default App;

组件设计

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

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

生命周期

• 挂载阶段
  1、constructor 构造函数
  2、static getDerivedStateFromProps
  3、render 渲染函数
  4、componentDidMount 组件已经挂载

static getDerivedStateFromProps(nextProps, prevState) {
    // 当组件的props发送变化时候 ,执行回调函数
    // 当props更新用Props更新state
	console.log("挂载:-02-getDerivedStateFromProps");
    return nextProps;
   }
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> );
    }
componentDidMount() {
        console.log("挂载-04 组件已经挂载")
        // 作用:操作dom,发起ajax ,添加事件,开启定时器
    }

• 更新阶段
  1、static getDerivedStateFromProps
  2、shouldCompoentUpdate 组件是否更新(返回true才更新)
  3、render 渲染
  4、getSnapshotBeforeUpdate 更新前获取快照(返回值是componentDidUpdate第三个参数)
  5、componentDidUpdate 组件已经更新

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("更新:01-getDerivedStateFromProps")
    return nextProps;
   }
shouldComponentUpdate(nextProps, nextState) {
    console.log("更新:02 组件是否需要更新");
    return true; //通常用做优化组件,返回true更新,false不更新
   }
 getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("更新:04 getSnapshotBeforeUpdate")
        // 获取组件的快照,在更新前
        // 返回的值是下个生命周期的第单个参数
        return {name:"mimu",age:17}
    }
 componentDidUpdate(prevProps, prevState,snap) {
        // 组件已经更新
        console.log("更新:05componentDidUpdate",snap)
    }

• 卸载阶段