【React基础三】组件传值、高阶组件、Hook

文章目录

    • [1. 组件传值](#1. 组件传值)
      • [1.1 概述](#1.1 概述)
      • [1.2 子组件](#1.2 子组件)
      • [1.3 父组件](#1.3 父组件)
    • [2. 高阶组件](#2. 高阶组件)
    • [3. Hook](#3. Hook)
      • [3.1 State Hook](#3.1 State Hook)
      • [3.2 Effect Hook](#3.2 Effect Hook)

1. 组件传值

1.1 概述

父组件向子组件传值(自定向下)可以直接使用props完成

js 复制代码
<List ref={this.ref} {...this.state.list[0]}/>

而子组件向父组件传值是自底向上的,这种操作react内部是不支持直接操作的,我们可以选择使用函数props来完成需求

通过在父组件引入的子组件中传递一个函数并传参,子组件去触发这个函数更改参数完成数据更新

1.2 子组件

js 复制代码
	const List = React.forwardRef((props,ref)=>{
           const userNameClickFun=(name)=>{
                props.getUserName(name)
            }
            return <div ref={ref} className="list">
                <div onClick={()=>{userNameClickFun(props.name)}} className="left"></div>
                <div className="right">
                    <div className="info">{props.name}</div>
                    <div className="text">{props.text}</div>
                </div>
             </div>
        })

1.3 父组件

js 复制代码
 getUserNameFun(name){
     console.log(name)
 }
render(){
    return <div className="comment-box">
            {
            this.state.list.map(v=><List getUserName={this.getUserNameFun} key={v.id} {...v}/>)
            }
            <div className="inp">
                <textarea ref="inpDom" onChange={(e)=>{this.getText(e)}}></textarea>
                <div>
                	 <button onClick={()=>{this.subFun()}}>提交评论</button>
                </div> 
            </div>
		</div>
}

2. 高阶组件

如果一个函数操作其他函数,将其他函数作为参数或将函数作为返回值,将其称为高阶函数。高阶组件类似于高阶函数,接收 React 组件作为输入,输出一个新的 React 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。可以对 render 方法作劫持,也可以控制 props 与 state。

简单来说,高阶组件只是 一个包装了另外一个 React 组件的 React 组件

js 复制代码
		const NavTitle=(props)=>{
           return props.type===1?<h1>{props.title}</h1>: <h2>{props.title}</h2>
        }

        const Nav = (props)=>{
            if(props.type!=1&&props.type!=2){
                return <p>{props.title}</p>
            }else{
                let newPro={
                    ...props,
                    title:'高阶标题'+props.title
                }
                return <NavTitle {...newPro}/>
            }
        }

3. Hook

使用函数声明的组件大多数为无状态组件,展示型组件一般是无状态组件

Hook是供给函数组件进行状态管理的方法,只能在 React 的函数组件中调用 Hook

3.1 State Hook

通过useState申明一个值为0的变量,并且同时可以获得一个可以更改当前变量的方法,通过setCount方法修改的count可以同时更新页面。等价Class组件的statesetState

复制代码
function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3.2 Effect Hook

useEffect简单理解就是监听函数组件中的数据。是componentDidMountcomponentDidUpdatecomponentWillUnmount 这三个函数的组合

js 复制代码
useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
相关推荐
一枚前端小能手6 分钟前
「周更第7期」实用JS库推荐:Vite
前端·javascript·vite
小中123423 分钟前
异步请求的性能提升
前端
我是天龙_绍24 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
我是天龙_绍1 小时前
Easing 曲线 easings.net
前端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo1 小时前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever1 小时前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙4551 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
Hilaku1 小时前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
m0_728033131 小时前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端