react 组件传参+生命周期+hooks:useState，useEffect

一 组件传参

父传子与子传父

1. 父组件

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
      setNum={this.setNum} 
      value={this.state.num}></ChildA>
      <ChildA></ChildA>
      </div>);
  }
}
 
 

export default App;

// 爷父孙  爷孙传参 用 context
// 一个简单的React Context传参案例可以是这样：

// //Context 对象
// const MyContext = React.createContext();

// //父组件
// class Parent extends React.Component{
//   state = {
//     message: "Hello World"
//   }
//   render(){
//     //把状态传递给Context对象 
//     return 
//      <MyContext.Provider value={this.state.message}>
//        <Child />
//      </MyContext.Provider>
//   }
// }

// //子组件
// class Child extends React.Component{
//   render(){
//     //从Context对象中获取参数 
//     return 
//       <MyContext.Consumer>
//         {message => <p>{message}</p>}
//       </MyContext.Consumer>
//   }
// }

子组件

function ChildA(props) {
  return ( <div>
    <p>childA子组件props参数：{props.value}</p>
    {/* 子向父传参是通过props的回调函数实现 */}
    <button onClick={()=>{props.setNum(100)}}>修改父组件的num值为100</button>
    </div> );
}

export default ChildA;

// 定义默认参数
ChildA.defaultProps = {value:1}

2组件插槽

父组件

import ChildA from './components/ChildA'

import React, { Component } from 'react';

class App extends Component {
  state = {  }
  render() { 
    return ( <div>
      <h2> 组件的插槽</h2>
    
      <ChildA>
        学号前端
      </ChildA>
  
    </div> );
  }
}
 

export default App

子组件

import React, { Component } from 'react';

class ChildB extends Component {
    constructor(props) {
        super(props);
    this.state = {  }

    }
    render() { 
        return ( <div>
            ChildB:通过props。children获取插槽的内容\
            <br/>
            {this.props.children}
        </div>);
    }
}
 
export default ChildB;

生命周期

import React, { PureComponent } from 'react';
class ChildC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { num:5 }
    // console.log("挂载:01 constructor")
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    // console.log("挂载:02 getDerivedStateFromProps")
    // console.log("更新:01 getDerivedStateFromProps")
    return {}
  }
  // shouldComponentUpdate(nextProps, nextState) {
  //   // console.log("更新:02  shouldComponentUpdate")
  //   // return true
  //   // 如果发现props相同就不更新返回false否则返回true
  //   if(this.props.value===nextProps.value){
  //     return false;
  //   }else{
  //     return true;
  //   }
  // }
 
  render() { 
    var num = this.state.num;
    // console.log("挂载:03 render")
    // console.log("更新:03 render")
    console.log("render")
    return ( <div>
    <h3>组件的生命周期ChildC</h3>
    <p>子组件接收value{this.props.value}</p>
    <button onClick={()=>this.setState({num:num+1})}>{num}</button>
    </div> );
  }
  componentDidMount() {
    // console.log("挂载:04 componentDidMount")
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // console.log("更新:04 getSnapshotBeforeUpdate")
    // 更新前获取快照,返回的的值下个cdu的第三个参数
    return {name:"mumu",age:19}
  }
  componentDidUpdate(prevProps, prevState,snap) {
    // console.log("更新:05 componentDidUpdate",snap)
  }
  componentWillUnmount(){
    // console.log("卸载：01 componentWilUnmount")
  }
}
 
export default ChildC;

// react的生命周期三个阶段
// 卸载阶段
// 01 componetWillUnmount组件将要卸载
// 更新阶段
// 01 static getDerivedStateFromProps
// 02 sholdComponentUpdate 返回true执行渲染，返回false不渲染（优化）
// 03 render 渲染
// 04 getSnapshotBeforeUpdate 更新前获取快照
// 05 componentDidUpdate 组件已经更新
// 挂载阶段
// 01 构造函数
// 02 static getDerivedStateFromProps 
//    props，state更新会执行
// 03 render  函数
// 04 componentDidMount 组件已经挂载
//    事件监听，dom操作，ajax，定时器

hooks：useState useEffect

import {useState,useEffect} from  'react'
// 使用useState模拟状态 useEffect模式生命周期
function fetchData(page=1){
  return fetch("http://dida100.com/mi/list.php?page="+page)
  .then(res=>res.json())
}
function App() {
  // 定义count数据，和设置Count的方法，默认count的值为5
  // count名字，setCount是自己随意定的后面是方法前面是数据
  const[count,setCount] = useState(5)
  // list笑话列表数，setList设置笑话列表数据。默认类别值为空
  const[list,setList] = useState([])
  useEffect(()=>{
    // console.log("组件已经挂载完毕：ajax，dom操作，定时器，事件挂载")
   fetchData()
   .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>
    {
      // docid与summary来自数据的字段
      list.map(item=><p key={item.docid}>{item.summary}</p>)
    }
  </div> );
}

export default App;