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