cometang前端技术博客 cometang前端技术博客
首页
  • html5
  • JavaScript
  • ES6
  • Vue
  • 微信小程序
  • react
  • react上手教程
  • 前端框架
  • 大神之路
  • 面试汇总
  • Node
  • PHP
  • Go语言
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

cometang

永远相信技术的力量
首页
  • html5
  • JavaScript
  • ES6
  • Vue
  • 微信小程序
  • react
  • react上手教程
  • 前端框架
  • 大神之路
  • 面试汇总
  • Node
  • PHP
  • Go语言
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • ES6

  • vue

  • h5

  • JavaScript

  • 前端框架

  • react

    • react语法基础
    • react函数式组件语法
      • 1.useState函数-data 的定义-hook
      • 2.事件处理
      • 3. useEffect 函数式组件替代-生命周期
      • 4.组件基础
      • 5.组件通信
        • 5.1 父传子 props
        • 5.2 子传父 子组件调用父组件传入的函数
    • react类组件语法
    • react路由
    • redux-redux toolkit-状态管理
  • 大神之路

  • 微信小程序

  • 面试题汇总

  • react轻松上手教程

  • 前端
  • react
cometang
2022-07-01
目录

react函数式组件语法

# 1.useState函数-data 的定义-hook

react ^16.8 新增的变量定义方式-在函数式组件中代替state定义变量

useState() 会返回一个数组中携带两个参数,一个是定义的变量初始值,第二个是修改该数据的方法。

一般情况下,通过数组的解构,快速获取useState的两个返回值。

例:let [num,setNum] = useState(100);

  • 基本数据类型

import { useState } from 'react';
import './App.css'

export default function App(){
      let [num,setNum] = useState(0)
    
      //修改数据--实现类似双向绑定的效果[页面改变-数据变]
      const changeNum = (e)=>{
        setNum(e.target.value)
      }
      //设置数据--直接覆盖[数据变-页面变]
      const setData = ()=>{
        setNum(1000)
      }

    return (
      <div>
        <h1>{num}</h1>
            <input type="text" onChange={changeNum}  value={num}/>
            <button onClick={setData}>直接设置数据</button>
      </div>
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  • 引用数据类型

import { useState } from 'react';
import './App.css'


export default function App() {
    let [search, setSearch] = useState('')

    let [likes, setLike] = useState([]);

    //修改search 的数据
    const changeSearch = (e) => {
        setSearch(e.target.value);
    }
    //添加元素
    const addData = (e) => {
        setLike([...likes, search]);
    }

    return (
        <div>
            <input type="text" onChange={changeSearch} placeholder='添加搜索记录' value={search} />
            <button onClick={addData}>添加数据</button>
            <ul>
                {likes.map((item, index) => {
                    return <li key={index}>  {item} </li>
                })}
            </ul>
        </div>
    )


}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 2.事件处理

React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同

  • React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
  • 直接绑定事件执行函数
import React from 'react'

export default function Methods() {

  const btn = (e)=>{
    console.log('点你了...');
    //自带event 事件对象
    console.log(e);
    //阻止事件冒泡
    e.stopPropagation()
  }

  return (
    <div>
         <button onClick={btn}>点我呀</button>
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • 绑定事件并传递参数

如果直接绑定事件,react 会误认为该函数是一个立即执行函数的js代码,这种绑定方式会导致每一次dom的更新都会调用一次该执行函数,如果需要在调用时传递参数就会出现bug.

解决方案:通过箭头函数返回一个调用执行函数 进行调用即可

import React from 'react'

export default function Methods() {

  const btn = (num)=>{
        console.log(num); //100
  }
  return (
    <div>
         <button onClick={()=>btn(100)}>点我呀</button>
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
  • 绑定事件并传递数据和event对象

箭头函数接受event对象 继续作为实参传递给执行函数

import React from 'react'

export default function Methods() {

  const btn = (num,e)=>{
        console.log(num); //100
        console.log(e); //事件对象
  }
  return (
    <div>
         <button onClick={(e)=>btn(100,e)}>点我呀</button>
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 3. useEffect 函数式组件替代-生命周期

react 16.8 新增hook,代替类组件中的生命周期钩子

函数式组件中没有生命周期;只有类组件才会存在生命周期,类组件的创建,更新,销毁等生命周期。

useEffect 函数默认:进入页面就执行一次,以后render函数每执行一次(数据发生改变)就跟着执行一次。

常见用法:在react中的异步或副作用操作不太好处理。异步操作:ajax请求,副作用操作:定时器(副作用:需要清除)这个

useEffect 接受两个参数,useEffect (执行函数,[依赖项])

执行函数:函数体中 发送 ajax 并通过 useState解构的方法 更新数据

依赖项:值必须是一个数组,通知react 在哪些数据发生变更时,执行useEffect 的执行函数

useEffect (执行函数);   //进入页面执行一次,每次render执行一次
useEffect (执行函数,[]);   //进入页面执行一次,以后再也不执行,不依赖props 和 state中的数据进行触发
useEffect (执行函数,[num]);  //进入页面执行一次,num发生改变执行一次
1
2
3
    useEffect(() => {
        //发送axios请求
        getData({ id:1000 }).then(res => {
            if (res.data.code === 1) {
                //修改数据
                setList(res.data.list)
            }
        })
    }, [])
1
2
3
4
5
6
7
8
9

# 4.组件基础

  • 父组件
import React from 'react'

// 导入子组件
import Son from '../components/Son/Son'
export default function App() {
  return (
    <div>
        {/* 使用子组件 */}
       <Son />
    </div>

  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 子组件
import React from "react";
//导入子组件
export default function Son(){

    return (
        <div>我是子组件</div>
    )
}
1
2
3
4
5
6
7
8

# 5.组件通信

react 的数据传递是单向数据流,父组件的数据发生改变,其所有使用了这个数据的 子组件 孙子组件 都会重新渲染

# 5.1 父传子 props

函数式组件-子组件的函数 接收形参 props 获取父组件传递的数据

  • 父组件
import React, { useState } from 'react'

// 导入子组件
import Son from '../components/Son/Son'
export default function App() {
    //定义数据
    let [name,setName] = useState('张麻子')
    //更改数据
    const changeName = ()=>{
        setName('黄四郎')
    }
  return (
    <div>
        {/* 使用子组件 并传递数据 静态数据和动态数据 */}
       <Son title="我是爸爸组件传递的标题"  name={name}/>
       <button onClick={changeName}>更改数据</button>
       
    </div>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • 子组件
import React from "react";
//导入子组件
//定义子组件时通过 形参接收 props 
export default function Son(props) {
    //接收数据-对象解构获取单个数据
    let { name, title } = props
    return (
        <div>
            <h1> {title}</h1>
            <h2>{name}</h2>
            <div>我是子组件</div>
        </div>
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5.2 子传父 子组件调用父组件传入的函数

父组件传递定义一个函数 传递给 子组件

子组件获取这个函数,并且调用该函数,调用时写入要传递的数据

  • 父组件
import React from 'react'

// 导入子组件
import Son from '../components/Son/Son'
export default function App() {


  //定义一个函数--传递给子组件
  //子组件接收-调用该函数--并回传数据
  const getData = (data) => {
    console.log(data);  //打印获取的数据
  }
  return (
    <div>
      {/* 使用子组件 并传递数据 静态数据和动态数据 */}
      <Son getSonData={getData} />
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  • 子组件
import React from "react";
//导入子组件
//定义子组件时通过 形参接收 props 
export default function Son(props) {
    //获取父组件传递的函数
    let { getSonData } = props;
    //在事件中调用父组件传递过来的函数 并传入数据
    const sendData = () => {
        getSonData('我是子组件传给爸爸组件的数据')
    }
    return (
        <div>
            <button onClick={sendData}> 传递数据给父组件</button>
        </div>
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑 (opens new window)
上次更新: 2022/07/12, 11:33:06
react语法基础
react类组件语法

← react语法基础 react类组件语法→

最近更新
01
go语言基础
07-13
02
《react上手教程》- 基础语法
07-13
03
redux-redux toolkit-状态管理
03-18
更多文章>
Theme by Vdoing | Copyright © 2019-2023

cometang | 唐世杰 渝ICP备18015657号-2

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式