ReactHook之useState

richest_qi

已于 2022-06-01 16:46:09 修改

阅读量141

点赞数

分类专栏： React17/18 文章标签： React Hooks useState 函数式组件计数器案例

于 2022-06-01 16:37:19 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/125084116

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

文章目录

计数器案例
函数式组件实现Counter

计数器案例

在这里插入图片描述
计数器案例涉及的代码文件，包括：

模板文件index.html
入口文件index.js
入口组件App.js
components/Counter/index.jsx，即Counter组件

模板文件index.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>State Hook</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

入口文件index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";

ReactDOM.render(<App/>,document.getElementById("root"));

入口组件App.js

import React, { Component } from 'react'
import Counter from "./components/Counter/index.jsx";

export default class App extends Component {
  render() {
    return (
      <div>
          <Counter/>
      </div>
    )
  }
}

Counter/index.jsx（Counter组件）

import React, {Component } from 'react'

export default class Counter extends Component {
  state = {
    count:0
  }
  
  handleClick = () => {
    this.setState(state => ({count:state.count+1}))
  }

  render() {
    return (
      <div> 
        <h2>当前值为{this.state.count}</h2>
        <button onClick={this.handleClick}>点我加1</button>
      </div>
    )
  }
}

函数式组件实现Counter

React Hook使得函数式组件可以使用state及其他React特性。

React Hook常见有：

State Hook，即useState()
Effect Hook，即useEffect()
Ref Hook，即useRef()

本例演示State Hook，即useState的使用。代码更改涉及的文件有：component/Counter/index.jsx。

import React,{useState} from "react";

export default function Counter(){
  const [count,setCount] = useState(0);

  function handleClick(){
    setCount(count+1);
    // setCount(count => count+1);
  }

  return (
    <div>
      <h2>当前值为{count}</h2>
      <button onClick={handleClick}>点我加1</button>
    </div>
  )
}

useState()，返回一个数组。数组的第一个元素是状态，第二个元素是操作状态的方法。

本例中useState(0)返回值的第一个元素是状态数据：count，第二个元素是操作状态的方法：setCount。
另外，setCount 有两种写法：
第一种写法：setCount(newValue)，如setCount(count+1)。
第二种写法：setCount(value => newValue)，如setCount(count => count+1)。

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ReactHook之useState

计数器案例涉及的代码文件，包括：入口文件index.js入口组件App.jsCounter/index.jsx（Counter组件）函数式组件实现CounterReact Hook使得函数式组件可以使用state及其他React特性。React Hook常见有：本例演示State Hook，即useState的使用。代码更改涉及的文件有：component/Counter/index.jsx。，返回一个数组。数组的第一个元素是状态，第二个元素是操作状态的方法。本例中返回值的第一个元素是状态
复制链接

扫一扫