初始react

最新推荐文章于 2024-08-13 14:34:58 发布

亦是木子也是雨

最新推荐文章于 2024-08-13 14:34:58 发布

阅读量167

点赞数

分类专栏： react 文章标签： react react事件绑定

本文链接：https://blog.csdn.net/qq_44162474/article/details/107722572

版权

react 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

react 简介

react 是用于构建用户界面的 JavaScript 库官网

特点

声明式编程：我们只需要维护自己的状态（数据），当状态（数据）改变时，React可以根据最新的状态（数据）去渲染我们的UI界面
组件化开发
多平台适配：可以开发移动端跨平台或 web 应用程序

开发依赖

react：react开发所必须的核心代码
react-dom：渲染在不同平台所需的核心代码
babel：将 jsx 转换成 react 代码的工具

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

如何引入

一：直接 CDN 引入
二：下载后，添加本地依赖
三：通过 npm

通过CDN引入中的 crossorigin属性的目的是为了拿到跨域搅拌呢的错误信息

react 简单使用

数据

组件中的数据大致分为两类

参与界面更新的数据：当数据变量时，需要更新组件渲染的内容
不参与界面更新的数据：当数据变量时，不需要更新将组建渲染的内容

参与界面更新的数据可以称之为是参与数据流，这个数据是定义在当前对象的state中（react 中的数据是单向的）

数据通常是定义在当前对象的 state 中的，如果要修改数据的话，需要调用 this.setState 方法

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "Hello World",
    }
  }
}
ReactDOM.render(<App/>, document.getElementById("app"));

事件绑定

关于 this 的指向问题，默认情况下的 this 是指向 undefined 的

比如给一个按钮（button 添加点击事件），在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象

但是在 React 中，react 并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象，所以 this 的指向才会是 undefined

如何绑定 this

<body>
  <div id="app"></div>

  <script src="../react/react.development.js"></script>
  <script src="../react/react-dom.development.js"></script>
  <script src="../react/babel.min.js"></script>

  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          message: "Hello World",
        }
        this.changeMessage = this.changeMessage.bind(this)
      }

      render() {
        return (
          <div>
            <h2>{this.state.message}</h2>
            <button onClick={this.changeMessage}>按钮</button>
            <button onClick={this.changeMessage.bind(this)}>按钮</button>
            <button onClick={() => {this.changeMessage()}}>按钮</button>
          </div>
        )
      }
      changeMessage() {
        this.setState({
          message: '被改变了'
        })
      }
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

</body>

列表展示

<body>
  <div id="app"></div>
  
  <script src="../react/react.development.js"></script>
  <script src="../react/react-dom.development.js"></script>
  <script src="../react/babel.min.js"></script>

  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          message: "Hello World",
          movies: ["大话西游", "盗梦空间", "星际穿越", "流浪地球"]
        }
      }

      render() {
        const liArray = [];
        for (let movie of this.state.movies) {
          liArray.push(<li>{movie}</li>);
        }

        return (
          <div>
            <h2>电影列表</h2>
            <ul>
              {
                this.state.movies.map((item) => {
                  return <li>{item}</li>
                })
              }
            </ul>
          </div>
        )
      }
    }
    ReactDOM.render(<App/>, document.getElementById("app"));
  </script>
</body>

计数器

<body>
  <div id="app"></div>

  <script src="../react/react.development.js"></script>
  <script src="../react/react-dom.development.js"></script>
  <script src="../react/babel.min.js"></script>

  <script type="text/babel">
    class App extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          counter: 0
        }
      }

      render() {
        return (
          <div>
            <h2>当前计数: {this.state.counter}</h2>
            <button onClick={() => {this.increment()}}>+1</button>
            <button onClick={() => {this.decrement()}}>-1</button>
          </div>
        )
      }

      increment() {
        this.setState({
          counter: this.state.counter + 1
        })
      }

      decrement() {
        this.setState({
          counter: this.state.counter - 1
        })
      }
    }
    ReactDOM.render(<App/>, document.getElementById("app"));
  </script>
</body>