React改变数据【案例】

愿➣

已于 2024-03-09 17:30:26 修改

阅读量580

点赞数 9

文章标签： react.js javascript 前端

于 2024-03-09 17:00:36 首次发布

本文链接：https://blog.csdn.net/weixin_59527403/article/details/136586927

版权

本文比较了在React中使用传统方式和简写方式管理组件状态的示例，介绍了如何通过`this.state`和`setState`实现状态更新。

摘要由CSDN通过智能技术生成

State传统方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Demo</title>  
  <!-- 引入React -->  
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  
  <!-- 引入ReactDOM -->  
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>  
  <!-- 引入Babel用于转换JSX（如果你不是通过构建工具如Webpack来转换的话） -->  
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body>
  <div id="test"></div> 
  <script  type="text/babel">
   class Weather extends React.Component{
    
    constructor(props) {
      super(props)
      // 初始化状态
      this.state={isHot:false}
      this.changeWrather = this.changeWrather.bind(this)
    }
    render() {
      // 读取状态
      const {isHot} = this.state
      return <h1 onClick={this.changeWrather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
    }
    changeWrather() {
      // 获取原来的isHot
      const isHot = this.state.isHot
      // 注意：状态必须通过setState进行更新 状态state不可直接更改
      this.setState({isHot:!isHot})
    }
   }
    // 渲染
    ReactDOM.render(<Weather/>,document.getElementById('test'))

</script>
</body>
</html>

在这里插入图片描述
State简写方式（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Demo</title>  
  <!-- 引入React -->  
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  
  <!-- 引入ReactDOM -->  
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>  
  <!-- 引入Babel用于转换JSX（如果你不是通过构建工具如Webpack来转换的话） -->  
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body>
  <div id="test"></div> 
  <script  type="text/babel">
    //创建组件
   class Weather extends React.Component{
  // 初始化状态
    state={isHot:false}
    render() {
      // 读取状态
      const {isHot} = this.state
      return <h1 onClick={this.changeWrather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
    }
    // 自定义方法
    changeWrather=() =>{
      // 获取原来的isHot
      const isHot = this.state.isHot
      // 注意：状态必须通过setState进行更新 状态state不可直接更改
      this.setState({isHot:!isHot})
    }
   }
    // 渲染
    ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>