父组件代码

import React, { useEffect, useRef } from 'react'
import { Button, Upload } from 'antd'
import AddCom from './components/add'
// 需要遍历的数据
const mapList = [
    key: "1",
    value: {}
    key: "2",
    value: {}
    key: "3",
    value: {}
const Index = (props: any) => {
//创建ref 数组 保存遍历组件
  const refMap = useRef([])
  const getData = ()=>{
    const data = []
    mapList.map(item=>{
      let objValue = refMap?.current[item.key]?.getData() // 通过ref 数组 取值
      data.push(objValue)
    console.log(data)
  return <div className="testUseRefPage">
    <div>使用useRef数组的方式遍历组件并通过ref取值</div>
    //需要遍历的组件 并通过ref 赋值
      mapList.map((item,index) => <AddCom key={index} num={index} ref={f => { refMap.current[item.key] = f }} />)
    <Button type="primary" onClick={getData}>获取各组件的值</Button>
  </div>
export default Index
import React, { forwardRef, useEffect, useState, useImperativeHandle } from 'react'
import { Button, Upload } from 'antd'
const Index = (props: any, ref) => {
  const [value, setValue] = useState(12)
  const { num } = props
  const getData = () => {
    return value + num
// 抛出给父组件的方法
  useImperativeHandle(ref, () => ({ getData }))
  return <div className="addComponent">
    add组件
  </div>
const IndexPage = forwardRef(Index)
export default IndexPage
我只写了hooks的方式，而这只是一种较为简单，容易理解的一种，我相信还有很多方法的。
 class组件的方式可以直接使用this.refs 操作拿到遍历的子组件的值，但是react已经不建议这种写法了。我们可以按照以上hooks的原理对class组件进去遍历组件取值的。
                                    我们知道，对于子组件或者节点，如果是class类，存在实例，可以通过 React.createRef() 挂载到节点或者组件上，然后通过 this 获取到该节点或组件。但是在子组件是函数组件的时候，因为函数组件没有实例，所以在正常情况下， ref 是不能挂载函数组件上的。那么此时，我们通过和forwardRef配合就能达到效果。.........
                                    项目说明/项目说明
EN：使用useEffect和useState的示例（SIMPLE）应用程序
EN：使用useEffect和useState的示例（SIMPLE）应用程序
先决条件/先决条件（最好在chrome上进行测试/最好在chrome上进行测试）
 ZH：开始之前，您需要在计算机上安装以下工具：[Git]（  ），[Node.js]（  ）。 另外，最好有一个编辑器来处理像[VSCode]（  ）这样的代码。
 ZH：开始之前，您需要在计算机上安装以下工具：[Git]（  ），[Node.js]（  ）。 另外，最好有一个编辑器来处理像[VSCode]（  ）这样的代码。
克隆此存储库/克隆此存储库
$ git clone 
在/ cmd /中访问项目文件夹/在cmd /终端中访问项目文件夹
$ cd react-hooks
安装依赖项/安装依赖项
$ npm安装
之前的两篇文章，分别介绍了react-hooks如何使用，以及自定义hooks设计模式及其实战，本篇文章主要从react-hooks起源，原理，源码角度，开始剖析react-hooks运行机制和内部原理，相信这篇文章过后，对于面试的时候那些hooks问题，也就迎刃而解了。实际react-hooks也并没有那么难以理解，听起来很cool，实际就是函数组件解决没有state，生命周期，逻辑不能复用的一种技术方案。
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况
                                    ref：用来绑定到HTML元素或者组件上，获取其DOM；forwardRef：帮助子组件拿到父组件中子组件上面绑定的ref，绑定到自己的某一个元素中。这样就将子组件的DOM直接暴露给了父组件。这种方式存在的弊端：        1. 直接暴露给父组件带来的问题是某些情况的不可控
        2. 父组件可以拿到DOM后进行任意的操作
        3. 只是希望父组件可以操作某些方法，并不希望它随意操作其他方法useImperativeHandle：减少暴露给父组件获取的DOM元素属性, 只暴露给父组
                                    useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
useRef() ，它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式
1.获取state的旧值
import React,{useState,useRef,useEffect} from "react";
function Example () {
  const [count, setCo.
                                    react组件分为类（class）组件和函数（function）组件。class组件是通过继承模版类（Component、PureComponent）的方式开发新组件的，继承是class本身的特性，它支持设置state，会在state改变后重新渲染，可以重写一些父类的方法，这些方法会在React组件渲染的不同阶段调用，叫做生命周期函数。function组件state和类似class组件的生命周期函数的功能，这种api就叫做hooks。灵魂所在。httpshttpshttps。...
import React, { useState, PureComponent, useEffect, useMemo, memo, useCallback, useRef } from "react";
// useMemo的写法与useState相同,但是调用时机不同,useState执行的是副作用，在组件渲染完...
                                    解析得出：div 直接渲染即可，vdom可以做到Input和List，是自定义组件（class），vdom默认不认识因此Input和List定义的时候必须声明 render函数根据props初始化实例，然后执行实例的render函数render函数返回的还是vnode对象 最后替换node,使用了React.createElement()方法进行的jsx转换初次渲染 - ReactDOM.render(, container) ：会触发patch(container, vnode)re-render - s
                                    这是2019 react入门到高级新课程学习react，不仅能带来技术提升，同时提高开发效率和体验，更能带来好的就业机会。本课程主要分为以下几个部分: 一，前端工程化基础? 主要学习node和npm、yarn的基本用法 二，es6语法学习必备的es6常用语法 。三，react基础知识 学习如何搭建react项目，以及react组件，jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。四，react进阶知识??学习表单的处理，事件处理，Portals的使用，以及数据请求和API管理等进阶知识。五，react高阶知识??学习react高级特性，react hooks，以及整个react生态体系的构成和应用 。努力学习哟，带你精通react。