React类组件

最新推荐文章于 2024-07-24 18:28:01 发布

新城大海

最新推荐文章于 2024-07-24 18:28:01 发布

阅读量51

点赞数

文章标签： react.js

本文链接：https://blog.csdn.net/weixin_45664217/article/details/120169178

版权

state
特点1：单向绑定，state变化视图自动更新，视图变化state不更新的
特点2：单向数据流，数据只能向下传递
特点3：state不能直接修改，要使用 this.setState()来修改
特点4：this.setState()是异步的，但在定时器里是同步的
特点5：多个this.setState()同时发生时，会被react合并成一个this.setState({})
通过{this.add.bind(this)来绑定事件

以类组件为例

<!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="test"></div>
  <div id="test1"></div>
  <!-- 引入React核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <!-- 引入React-DOM  -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
  <!-- 引入babel,将jsx转换为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    class Weather extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          isHot: false,
          wind: '微风'
        }
        // this.changeWeather = this.changeWeather.bind(this)
      }
      render () {
        let { isHot, wind } = this.state
        return (
          <h1 onClick={ this.changeWeather.bind(this) }> { isHot ? '炎热': '凉爽'}, { wind }</h1>
        )
      }
      changeWeather() {
        // console.log(this)
        let { isHot } = this.state
        this.setState({
          isHot: !isHot
        })
      }
    }
    ReactDOM.render(<Weather/>, document.getElementById('test'))
  </script>
</body>
</html>

说明：

this.changeWeather = this.changeWeather.bind(this) 可以通过这里的bind改变this的指向问题
写法二：

<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="test"></div>
  <div id="test1"></div>
  <!-- 引入React核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <!-- 引入React-DOM  -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
  <!-- 引入babel,将jsx转换为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    class Weather extends React.Component {
      state = {
          isHot: false,
          wind: '微风'
      }
      render () {
        let { isHot, wind } = this.state
        return (
          <h1 onClick={ this.changeWeather }> { isHot ? '炎热': '凉爽'}, { wind }</h1>
        )
      }
      changeWeather = () => {
        // console.log(this)
        let { isHot } = this.state
        this.setState({
          isHot: !isHot
        })
      }
    }
    ReactDOM.render(<Weather/>, document.getElementById('test'))
  </script>
</body>
</html>

本篇结束 End!!!

新城大海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React类组件

state特点1：单向绑定，state变化视图自动更新，视图变化state不更新的特点2：单向数据流，数据只能向下传递特点3：state不能直接修改，要使用 this.setState()来修改特点4：this.setState()是异步的，但在定时器里是同步的特点5：多个this.setState()同时发生时，会被react合并成一个this.setState({})通过{this.add.bind(this)来绑定事件以类组件为例<!DOCTYPE html><.
复制链接

扫一扫