当前位置：网站首页>Useeffect, triggered when function components are mounted and unloaded

Useeffect, triggered when function components are mounted and unloaded

2022-07-06 16:14:00 【Dream height 1.8 meters】

1 With no arguments

It is executed after the first rendering and after each update

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
       const [number, setNumber] = React.useState(0); React.useEffect(() => {
       console.log(' Trigger useEffect' + number); }); return <button onClick={
      () => setNumber(number + 1)}> Click on {
      number}</button> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>

</html>

Each update , Will trigger useEffect
Insert picture description here

2 With parameters

You can send more than one [param1,param2,param3....]
Execute when the specified parameter changes

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
       const [number, setNumber] = React.useState(0); const [change, setChange] = React.useState(0); React.useEffect(() => {
       console.log(' Trigger useEffect' + number); }, [change]); return [<button onClick={
      () => setNumber(number + 1)}>number{
      number}</button>, <button onClick={
      () => setChange(change + 1)}>change{
      change}</button>] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>

</html>

Only change When it's updated , Will trigger useEffect
Insert picture description here

3 Pass in empty array

Run only once effect（ Only when the component is mounted and uninstalled ）

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
       const [number, setNumber] = React.useState(0); React.useEffect(() => {
       console.log(' Trigger useEffect' + number); setNumber(5) }, []); return <button onClick={
      () => setNumber(number + 1)}> Click on {
      number}</button> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>

</html>

（ The beginning is refreshed ） When you mount it useEffect hold number Set to 5, Subsequent updates do not trigger useEffect
Insert picture description here

4 effect Return function

Execute the return function when uninstalling
Take the timer as an example , This is the case when there is no return function

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const Custom = () => {
       const [number, setNumber] = React.useState(0); React.useEffect(() => {
       console.log(' Trigger useEffect' + number) let interval = null; let t = 0 interval = setInterval(() => {
       console.log(' Timer ', t); setNumber(++t) }, 1000); }, []); return <div> Timer {
      number}</div> } const customSwitch = () => {
       const [on, setOn] = React.useState(false); return [<button onClick={
      () => setOn(!on)}>{
      on ? ' close ' : ' Turn on '}</button>, on && <Custom />] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(customSwitch), domContainer); </script>

</html>

custom When the component is uninstalled , The timer did not cancel , After remounting , There are two timers
Insert picture description here
Cancel the timer in the return function

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; let interval = null; const Custom = () => {
       const [number, setNumber] = React.useState(0); React.useEffect(() => {
       console.log(' Trigger useEffect' + number) let t = 0 interval = setInterval(() => {
       console.log(' Timer ', t); setNumber(++t) }, 1000); return ()=> {
       console.log(' Trigger when unloading effect') clearInterval(interval) } }, []); return <div> Timer {
      number}</div> } const customSwitch = () => {
       const [on, setOn] = React.useState(false); return [<button onClick={
      () => setOn(!on)}>{
      on ? ' close ' : ' Turn on '}</button>, on && <Custom />] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(customSwitch), domContainer); </script>

</html>

uninstall custom When , Cancel timer , When you mount again , Turn on timer .
Insert picture description here

Official website ：https://react.docschina.org/docs/hooks-effect.html
This is also very good ：https://blog.csdn.net/aiwwy/article/details/123338490

原网站

版权声明
本文为[Dream height 1.8 meters]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/187/202207060920187256.html

当前位置：网站首页>Useeffect, triggered when function components are mounted and unloaded

Useeffect, triggered when function components are mounted and unloaded

1 With no arguments

2 With parameters

3 Pass in empty array

4 effect Return function

边栏推荐

猜你喜欢

随机推荐