master

分支 (1)

管理

管理

master

react-learning
/
05在组件中定义局部状态-function.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- react 核心库 -->
    <script src="./lib/react.development.js"></script>
    <!-- react 浏览器版 -->
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>

    <script type="text/babel">
      // 组件，每一个组件都需要返回一个html结构的内容
      function App(props) {
        // useState 16.8之后新增的 hook 方法
        // 可以在function定义的组件中模拟局部状态
        // 16.8之后（19年年初）官方推荐function定义组件
        // antd从20年后已经全面使用function定义组件结合hook使用
        // 接收的参数为初始化的值，返回的数组 第一个参数为 定义的变量名 第二个参数为 修改变量值的方法
        const [count, setCount] = React.useState(1);
        return <h1 onClick={() => setCount(count + 1)}>当前值为:{count}</h1>;
      }

      // 父传子 使用props 属性
      ReactDOM.render(<App step={2} />, document.getElementById("app"));
    </script>
  </body>
</html>