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）的主要内容，如果未能解决你的问题，请参考以下文章