文章目录

前言
一.函数式组件
- 理解：
- 作用
- 代码示例：
- - 函数组件注意事项
二、React hook
- - React Hooks 优势
  - Hook 使用规则
- 2.常用的hook
- - useState
  - useEffect
  - - 介绍：
    - - 代码示例：
  - Ref和useefect
  - - 代码案例:
总结

前言

今天我们一起来学习react中的函数式组件，以及took的一些用法。

一.函数式组件

理解：

函数式组件中，没有 state 和生命周期，所以又被称为无状态组件，在早期 react 版本中，被当前纯渲染组件来用

作用

主要是用来渲染内容,函数名字就是组件名。

代码示例：

import  React,{ useState} from 'react';import Child from './Child'
/* let [状态的值,修改状态的方法] =useState(状态的初始值);*/function App() {// console.log(this);// state = {//   data:["dd"]// }// let {data} =this.state;let [data,setData] =useState({name:'浩克',age:18});let [show,setShow] = useState(true)return <div>{show ?<Child data={data}/>:""}<button onClick={()=>{setData({name:"疯狂浩克",age:data.age});}}>变身</button><button onClick={()=>{setShow(false)}}>卸载</button></div>}export default App;

函数组件注意事项

1.组件的第0个参数是props----接收父级传过来的信息

2.组件中的 return(必须写)----定义该组件要渲染的内容

3.没有生命周期,没有this,没有state

4.在16.7之前, 函数组件一直当做纯渲染组件来使用

二、React hook

React hooks 是React 16.8中的新增功能。它们使你无需编写类即可使用状态和其他React功能。

参考：https://reactjs.org/docs/hooks-intro.html

React Hooks 优势

简化组件逻辑
复用状态逻辑
无需使用类组件编写

Hook 使用规则

只在最顶层使用 Hook
只在 React 函数中调用 Hook
- React 函数组件中
- React Hook 中 - 我自己定义 hook 时，可以调用别的hook
所有的 hook 必须以 use

2.常用的hook

useState

函数组件里定义状态值

先引用useState,接着定义

let [状态值,修改状态的方法名]=userState(状态的初始值)

修改状态值方法名是自己定义的

代码示例：

App.js

import  React,{ useState} from 'react';import Child from './Child'
/* let [状态的值,修改状态的方法] =useState(状态的初始值);*/function App() {// console.log(this);// state = {//   data:["dd"]// }// let {data} =this.state;let [data,setData] =useState({name:'浩克',age:18});let [show,setShow] = useState(true)return <div>{show ?<Child data={data}/>:""}<button onClick={()=>{setData({name:"疯狂浩克",age:data.age});}}>变身</button><button onClick={()=>{setShow(false)}}>卸载</button></div>}export default App;

Child.js

import  React,{useState,useEffect} from 'react';
function Child(props){let {data} = props;let [age,setAge] = useState(8)useEffect(() => {console.log("挂载了");useEffect(() =>{return ()=>{console.log("卸载了");}},[])useEffect(() =>{console.log("更新了");},[age])return <div><h1>name:{data.name}</h1><h1>age:{age}</h1><button onClick={()=>{setAge(++age)}}>长一岁</button></div>}export default Child

useEffect

介绍：

是一个类组件
在 componentDidMount、componentDidUpdate 和 componentWillUnmoun中使用(挂载,更新,卸载)
有两个参数第一个蚕食是回调函数,第二个参数是个数组,里面放检测的参数;
useEffect 的第二个参数，有三种情况

什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate
传入一个空数组 [], 只会调用一次，相当于 componentDidMount 和 componentWillUnmount
传入一个数组，其中包括变量，只有这些变量变动时，useEffect 才会执行

代码示例：

import  React,{ useState} from 'react';
import Child from './Child'function App() {let [data,setData] =useState({name:'浩克',age:18}  );let [show,setShow] = useState(true)return <div>{show ?<Child data={data}/>:""}<button onClick={()=>{setData({name:"疯狂浩克",age:data.age});}}>变身</button><button onClick={()=>{setShow(false)}}>卸载</button></div>}export default App;

Child.js

import  React,{useState,useEffect} from 'react';
function Child(props){let {data} = props;let [age,setAge] = useState(8)useEffect(() => {console.log("挂载了");},[]);useEffect(() =>{return ()=>{console.log("卸载了");}},[])useEffect(() =>{console.log("更新了");},[age])return <div><h1>name:{data.name}</h1><h1>age:{age}</h1><button onClick={()=>{setAge(++age)}}>长一岁</button></div>}export default Child

挂载和更新在useEffect里面写,而卸载在return里面写

检测参数值发生变化才触发此方法 ,如果不写参数,怎样都不会触发这些方法

Ref和useefect

代码案例:

App.js代码如下:

import  React,{ useState} from 'react';import Child from './Child'
function App() {let [data,setData] =useState({name:'浩克',age:18});let [show,setShow] = useState(true)return <div>{show ?<Child data={data}/>:""}<button onClick={()=>{setData({name:"疯狂浩克",age:data.age});}}>变身</button><button onClick={()=>{setShow(false)}}>卸载</button></div>}export default App;

Child.js

import  React,{useState,useEffect,useRef} from 'react';function Child(props){let {data} = props;let [age,setAge] = useState(8)// 只要不做修改ref，就会存储初始的值(变化前的值)let ageP =useRef(age);let [txt,setTxt] =useState("文字")let txtP =useRef(txt);useEffect(() => {//  console.log(ageP.current,age);console.log(txtP.current,txt);txtP.current =txt;},[txt]);let message = `hahahha`return <div><h1>name:{data.name}</h1><h1 ref={ageP}>age:{age}</h1><button onClick={()=>{setAge(++age)}}>长一岁</button><p>{txt}</p><input type="text" value={txt}onChange={({target})=>{setTxt(target.value )}}/><p dangerouslySetInnerHTML={{__html:message}}> </p></div>}export default Child

总结

今天我们一起学习了react的函数式组件以及react took 的一些功能及它的使用方法。

觉得作者写的不错，可以点个赞

react讲解（函数式组件，react hook）相关推荐

react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
[react] react的函数式组件有没有生命周期？
[react] react的函数式组件有没有生命周期? 没有个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
React之函数式组件和高阶组件（装饰器、带参装饰器）
import React from 'react'; // 此句不能少 import ReactDom from 'react-dom';const Wrapper = props => < ...
前端学习（2224）：react之函数式组件
import React from 'react'; import ReactDOM from 'react-dom';function Childcom() {let title = < h2 ...
React之函数式组件使用props
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
React之函数式组件
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
React 之函数式组件使用props
对于react的三大核心属性state.props.refs,只有props能被函数式组件使用,因为只有props属性可以作为参数调用. 相关代码如下: <!DOCTYPE html> & ...
2021-05-29 react antd 函数式组件使用history.push(url)时，跳转不刷新的问题？
**在传递URL使使用给传递了一个state成功解决问题形如history.push(url,{a:1}) **
React native 第三方组件 React native swiper
简介: 这个框架主要是用来做轮播图,焦点图等,内置了各种样式的轮播图. github地址: https://github.com/leecade/react-native-swiper 如何使用安装 ...

react讲解（函数式组件，react hook）

文章目录

前言

一.函数式组件

理解：

作用

代码示例：

函数组件注意事项

二、React hook

React Hooks 优势

Hook 使用规则

2.常用的hook

useState

useEffect

介绍：

代码示例：

Ref和useefect

代码案例:

总结

react讲解（函数式组件，react hook）相关推荐

最新文章

热门文章