ReactHook之useState

作者：我家小花儿 | 2024-07-29 00:16:00

踩

ReactHook之useState

文章目录

计数器案例
函数式组件实现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>
1
2
3
4
5
6
7
8
9
10
11
12

入口文件index.js

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

ReactDOM.render(<App/>,document.getElementById("root"));
1
2
3
4
5

入口组件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>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

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>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

函数式组件实现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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/896345