React 函数组件

简介: React 函数组件

React 函数组件


函数组件的创建方式

const Hello = (props) => {
return <div>{props.message}</div>
}
const Hello = props => <div>{props.message}</div>
function Hello(props){
return <div>{props.message}</div>
}

消除了this

函数组件能代替Class组件吗?

完全可以,但是目前不行,我们要学些新的东西,比如hooks API

函数组件代替Class组件

面临两个问题

1.函数组件没有state

React v16.8.0推出Hooks API

其中的一个API叫做useState可以解决问题

2.函数组件没有生命周期

React v16.8.0推出Hooks API

其中的一个API叫做useEffect可以解决问题

useEffect(函数式编程的专有名词)是专门用来解决生命周期的问题的。

1.函数组件没有state怎么办?

React提供了useState并提供读、写2个API,可以对数据进行读、写操作。

第1个参数是读,第2个参数是写,初始值为0。

需要引入useEffect或者直接React.useEffect

const App = props => { 
    const [n, setN] = React.useState(0) 
    const onClick = () => {
        setN(n + 1)
    }
    return (
        <div>{n}
            <button onClick={onClick}> +1 </button>
        </div>
    )
}

函数组件模拟生命周期

什么叫生命周期?

当处于某个阶段时会有提醒要不要做什么事(渲染、挂载、更新、卸载)

用useEffect模拟3个重要的生命周期

一.通过useEffect模拟/实现第一次渲染

细节:useEffect默认每次渲染都会调用(只有1个参数),利用第2个参数[]指明只在第1次渲染时调用该函数。

import React, { useEffect } from "react" 
//需要引入useEffect或者直接`React.useEffect`
const App = props => {
  const [n, setN] = React.useState(0)
  const onClick = () => {
    setN(n + 1)
  }
  console.log(n) //每次渲染都会执行
  useEffect(() => { 
    console.log("use effect")
  }, [])
  return (
    <div>{n}
      <button onClick={onClick}>+1</button>
    </div>
  )
}
export default App

二.通过useEffect模拟/实现更新

细节:第2个参数填"要更新的"变量,比如在n更新时执行useEffect

1' 只有1个变量时:

useEffect(() => {
  console.log("n变了")
}, [n])

2' 有多个变量时:

useEffect(() => {
  console.log("n或者m变了")
}, [n, m])
等价于:
useEffect(() => {
  console.log("state变了")
})
不写的意思是,任何一个state变化都会执行useEffect函数

三.通过useEffect模拟/实现组件将死

每次点击hide时打印'Child 销毁了'

逻辑:  在useEffect函数里return另外一个函数,return的函数就是要死的。

import React, { useEffect, useState } from "react"
const App = props => {
//constructor
  const [childVisible, setChildVisible] = useState(true) //默认看得见
  const hide = () => {
    setChildVisible(false)
  }
  const show = () => {
    setChildVisible(true)
  }
  //return就是render
  return (
    <div>
    //如果是true就隐藏,如果是false就显示 
      {childVisible ? <button onClick={hide}>hide</button> : <button onClick={show}>show</button>}
    //如果是<Child />就显示,否则不显示 
      {childVisible ? <Child /> : null}
    </div>
  )
}
const Child = props => {
  useEffect(() => {
    console.log("渲染或者变化了")
    return () => {
      console.log('Child 销毁了')
    }
  })
  return ( <div>Child</div> )
}

细节

1.不能这样写:onClick={setChildVisible(false)}

onClick只接收函数,setChildVisible(false)返回值是undefined,undefined赋给onClick,onClick有个屁用,基础不扎实不要瞎写。

2.show是用来做函数名的,不是用来做变量的。

其它生命周期怎么模拟?

\

网络异常,图片无法展示
|

\

模拟render:函数组件的return就是render,返回值就是render的返回值。 其它.当需要return复杂逻辑时,return可以直接返回一个函数,将复杂逻辑写在函数里:

注意:x一定要返回div! 在x返回div前可以做任何事情
标签名最好都大写,防止跟原生的标签冲突。
const X = () => { 
//const n = 1+1 复杂逻辑
  return <div>x</div> 
}
const App = props =>{
  return X()
}

2.不光return x,我还return另外一个函数,把2个函数拼在一起:

标签名最好都大写,防止跟原生的标签冲突

const X = () => { 
  const n = 1+1
  return <div>x</div> 
}
const Y = () => { 
  const n = 1+1 
  return <div>y</div> 
}
const App = props =>{
  return <>
    <X></X> <Y></Y>
  </>
}


相关文章
|
6天前
|
前端开发 JavaScript 开发者
React 按钮组件 Button
本文介绍了 React 中按钮组件的基础概念,包括基本的 `&lt;button&gt;` 元素和自定义组件。详细探讨了事件处理、参数传递、状态管理、样式设置和可访问性优化等常见问题及其解决方案,并提供了代码示例。帮助开发者避免易错点,提升按钮组件的使用体验。
114 77
|
3天前
|
存储 前端开发 UED
React 面包屑组件 Breadcrumb 详解
面包屑导航是现代Web应用中常见的UI元素,帮助用户了解当前位置并快速返回上级页面。本文介绍如何使用React构建面包屑组件,涵盖基本概念、实现方法及常见问题。通过函数式组件和钩子,结合React Router动态生成路径,处理嵌套路由,并确保可访问性。示例代码展示了静态和动态面包屑的实现,帮助开发者提升用户体验。
97 73
|
7天前
|
前端开发 UED 开发者
React 对话框组件 Dialog
本文详细介绍了如何在 React 中实现一个功能完备的对话框组件(Dialog),包括基本用法、常见问题及其解决方案,并通过代码案例进行说明。从安装依赖到创建组件、添加样式,再到解决关闭按钮失效、背景点击无效、键盘导航等问题,最后还介绍了如何添加动画效果和处理异步关闭操作。希望本文能帮助你在实际开发中更高效地使用 React 对话框组件。
110 75
|
1月前
|
前端开发 JavaScript 测试技术
React 分页组件 Pagination
本文介绍了如何在 React 中从零构建分页组件,涵盖基础概念、常见问题及解决方案。通过示例代码详细讲解了分页按钮的创建、分页按钮过多、初始加载慢、状态管理混乱等常见问题的解决方法,以及如何避免边界条件、性能优化和用户反馈等方面的易错点。旨在帮助开发者更好地理解和掌握 React 分页组件的开发技巧,提升应用的性能和用户体验。
74 0
|
1月前
|
设计模式 前端开发 编译器
与普通组件相比,React 泛型组件有哪些优势?
与普通组件相比,React 泛型组件有哪些优势?
100 63
|
12天前
|
前端开发 Java API
React 进度条组件 ProgressBar 详解
本文介绍了如何在 React 中创建进度条组件,从基础实现到常见问题及解决方案,包括动态更新、状态管理、性能优化、高级动画效果和响应式设计等方面,帮助开发者构建高效且用户体验良好的进度条。
39 18
|
26天前
|
存储 前端开发 测试技术
React组件的最佳实践
React组件的最佳实践
|
25天前
|
前端开发 API 开发者
React 文件上传组件 File Upload
本文详细介绍了如何在 React 中实现文件上传组件,从基础的文件选择和上传到服务器,再到解决文件大小、类型限制、并发上传等问题,以及实现多文件上传、断点续传和文件预览等高级功能,帮助开发者高效构建可靠的应用。
51 12
|
20天前
|
存储 前端开发 JavaScript
React 表单输入组件 Input:常见问题、易错点及解决方案
本文介绍了在 React 中使用表单输入组件 `Input` 的基础概念,包括受控组件与非受控组件的区别及其优势。通过具体代码案例,详细探讨了创建受控组件、处理多个输入字段、输入验证和格式化的方法,并指出了常见易错点及避免方法,旨在提升表单的健壮性和用户体验。
31 4
|
27天前
|
前端开发 JavaScript API
React 文件下载组件 File Download
本文介绍了在React中实现文件下载组件的方法,包括使用`a`标签和JavaScript动态生成文件,解决了文件路径、文件类型、大文件下载及文件名乱码等问题,并展示了使用第三方库`file-saver`和生成CSV文件的高级用法。
37 6