React Hooks学习之旅一：搭建ReactHocks学习环境

最新推荐文章于 2024-05-06 15:36:20 发布

居安_

最新推荐文章于 2024-05-06 15:36:20 发布

阅读量205

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/muAluo/article/details/109696890

版权

React Hooks useState 无状态组件 React版本状态管理

关键词由CSDN通过智能技术生成

react 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

React Hooks是React的新特性，不再继承Component，React版本在16.8以上的才可以使用。

实现的效果如下：

新建一个ReactHooksDemo文件夹，在该文件夹下新建React项目。

create-react-app demo01

删除src文件下不必要的文件，只保留index.js。

新建Example组件：

import React, { useState } from 'react';

/**useState可以设置和改变状态 */
function Example(){
    const [count,setCount] = useState(0);
    return(
        <div>
            <p>You clicked {count} times</p>
            <button 
                onClick={()=>{setCount(count+1)}}
            >
                Click me
            </button>
        </div>
    )
}

export default Example;

在index.js中引入Example：

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example';

ReactDOM.render(
    <Example />,
  document.getElementById('root')
);