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;