react-hooks

bob_frisbee

已于 2023-06-07 05:37:11 修改

阅读量145

点赞数 3

分类专栏： React

于 2020-12-15 15:43:03 首次发布

本文链接：https://blog.csdn.net/weixin_43881418/article/details/111212517

版权

react.js javascript 前端

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、快速开始
二、useState用法
三、useEffect用法
总结

前言

这个教程主要针对的纯净的基于HTML的demo来介绍react hooks，这样有助于新手对react hooks的理解和自己本地照着教程快速亲自的试验起来

一、快速开始

本地新建一个demo.html,然后引入需要使用的reac相关的js,代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  </head>
  <body>
  </body>
</html>

二、useState用法

const [state, setState] = useState(initialState);

返回一个 state，以及更新 state 的函数。
在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      //记住需要写 type="text/babel"
      const { useState } = React; //这里需要这么引入
      function Demo(props) {
        const [name, setName] = useState("bob");
        return (
          <div>
            <p>{name}</p>
            <button onClick={() => setName("tom")}>点击改变name的值</button>
          </div>
        );
      }
      ReactDOM.render(<Demo />, document.getElementById("example"));
    </script>
  </body>
</html>

三、useEffect用法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      const { useState, useEffect } = React;
      function Counter() {
        const [count, setCount] = useState(0);

        useEffect(() => {
            setTimeout(() => {
                console.log(count)
            }, 3000)
        })
        return (
            <div>
                <p>You clicked {count} times</p>
                <button onClick={() => setCount(count + 1)}>
                    Click me
                </button>
            </div>
        );
    }
      ReactDOM.render(<Counter />, document.querySelector("#example"));
    </script>
  </body>
</html>