react组件传参

1、父传子 props传参

import ChildA from "../components/ChildA";
import React,{Component} from "react";

class App extends Component {
  
  state = { num:5 }
  // 定义一个修改num的方法
  setNum=v=>this.setState({num:v})
  render() { 
    return ( <div>
      <h2>组件传参</h2>
      <p>App的num值：{this.state.num}</p>
      {/* react 父传子用props */}
      {/* 把函数当做props传递给子组件 */}
      <ChildA value={this.state.num} setNum={this.setNum}></ChildA>
      <ChildA></ChildA>
    </div> );
  }
}
 
export default App;

创建ChildA组件

function ChildA(props) {
    return ( <div>
        <p>childA子组件{props.value}</p>
        {/* 子向父组件是通过props的会掉函数实现 */}
        <button onClick={()=>{props.setNum(100)}}>修改父组件的num为100</button>
    </div>)
}
export default ChildA;
// 定义默认参数
ChildA.defaultProps = {value:1}

2、子父传参 props+回调

import React, { Component } from 'react';
import ChildB from '../components/ChildB';
import Modal from '../components/Modal';
class App extends Component {
  
  state = { visible:false }
  onclose=()=>this.setState({visible:false})
  render() { 
    return ( <div>
      <h2>弹框组件</h2>
      {/* 单击按钮设置visible为true */}
      <button onClick={()=>this.setState({visible:true})}>显示弹框</button>
      {/* 使用Modal弹框，传入属性，onclose关闭弹框方法  visible控制弹框是否关闭 */}
      <Modal onclose={this.onclose} visible={this.state.visible} title={'祖国'}></Modal>
      <h2>组件的插槽</h2>
      <ChildB>
        <p>吃饭</p>
        <p>睡觉</p>
      </ChildB>
    </div> );
  }
}
 
export default App;

创建子组件ChildB

import React, { Component } from 'react';
class ChildB extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
        console.log(props.children);
    }
    render() { 
        return ( <div>
            childB:通过props.children获取插槽内容
            {this.props.children}
        </div> );
    }
}
 
export default ChildB;

3、生命周期

// react 的生命周期三个阶段
// 卸载阶段
// 01 componetwillUnmount组件将要卸载
// 更新阶段
// 01 static getDerivedStateFromProps 
// 02 sholdCompinentUpdate 返回true 执行渲染  返回false不渲染不优化
// 03 render 渲染
 // 04  getSnapshotBeforeUpdate  更新前获取快照
//  05  componentDidUpdate 组件已经更新

// 挂载阶段
// 01 构造函数
// 02 static getDerivedStateFromProps
    // props,state更新会执行
// 03 render  函数
// 04  componentDidMount 组件已经挂载
// 事件监听  dom操作  ajax  定时器

4、hooks:useState,useEffect的使用

import { useEffect, useState } from "react";
// 使用useState模拟状态
function App() {
  // 定义count数据,和设置Count的方法，默认count的值为5
  const[count,setCount] = useState(5)
  const[list,setList] = useState([])
  useEffect(()=>{
    // console.log(组件已经挂载完毕：ajax，dom 定时器。事件挂载);
    fetch('http://dida100.com/mi/list.php')
    .then(res=>res.json())
    .then(res=>{
      setList(res.result)
    })
  },[])
  // 模拟count，list的更新
  // useEffect(()=>{
  //   console.log('count已经更改');
  // }) [count,list]
  useEffect(()=>{
    console.log('任意数据的更新');
  })
  return ( <div>
    <h3>函数组件：无状态组件</h3>
    <button onClick={()=>setCount(count+2)}>{count}</button>
    {
      list.map(item=><p key={item.docid}>{item.summary}</p>)
    }
  </div> );
}

export default App;