react讲解（函数式组件，react hook）
Posted stay_少年与梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react讲解（函数式组件，react hook）相关的知识，希望对你有一定的参考价值。
文章目录
前言
今天我们一起来学习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）的主要内容，如果未能解决你的问题，请参考以下文章