01-react基本使用跟coderwhy学习React react基本介绍 react事件绑定 react组件化介绍

react介绍

react:用于构建用户界面的JavaScript库

声明式编程：它允许我们只需要维护自己的状态，当状态改变时，react可以根据最新的状态去渲染UI界面
组件化开发
多平台适配：开发web页面,开发reactNative、ReactVR

react开发依赖

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

helloReact案例

引入三个核心包

引入方式

cdn
下载
npm

ReactDOM.createRoot函数：用于创建一个React根，之后渲染的内容会包含在这个根中
script代码必须添加type="text/bable"，作用是可以让babel可以解析jsx语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app"></div>
<!-- 引入react -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- 引入react-dom -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 引入babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  //16.8以前
  // const EL = <div>16.8以前渲染</div>
  // ReactDOM.render(EL,document.querySelector("#app"))
  
  const EL2 = <div>16.8以后渲染</div>
  const root = ReactDOM.createRoot(document.querySelector("#app"));
  root.render(EL2)
  
</script>
  
</body>
</html>

hello-react组件化开发

类组件
函数式组件

类方式封装组件

定义一个类(组件名称必须大写)，并继承自React.Component
实现当前组件的render函数，render函数返回值就是渲染的内容

<script type="text/babel">

//继承React.Component
  class App extends React.Component{
    render(){
      return (
          <div>App</div>
          )
    }
  }

  const root = ReactDOM.createRoot(document.querySelector('#app'));
  root.render(<App/>)
</script>

组件化-数据依赖

在组件中的数据，可以分为2类：

参与界面更新的数据：当数据变量需要更新组件渲染的内容
不参与界面更新的数据：当数据变量不需要更新组件渲染的内容参与界面更新的数据，可以称之为 参与数据流，这个数据是定义在当前对象的state中

可以通过在构造函数中 this.state = {定义数据}
当数据发生变化时，可以调用 this.setState来更新数据,并通知React进行update操作，- 在进行update操作时，会重新调用render函数，并使用最新数据来渲染页面

组件化事件绑定

组件化问题：事件绑定的this

在类中直接定义有一个函数，并且将这个函数绑定到元素的onClick事件上，当前这个函数的this指向谁？
默认情况下是undefined

<button onClick={this.changeText.bind(this)}></button>

电影列表案例

  <script type="text/babel">

    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          name: 'Jennie Ruby Jane',
          movies: ["星际穿越", "恋恋笔记本", "后天"]
        }
      }

      render() {
        const { movies } = this.state;
        return (
          <div>
            <p>{this.state.name}</p>
            <p>{movies}</p>
            <ul>
              {movies.map(item => (<li>{item}</li>))}
            </ul>
          </div>
        )
      }
    }

    const root = ReactDOM.createRoot(document.querySelector("#app"));
    root.render(<App />);


  </script>

计数器案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <!-- 引入react -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!-- 引入react-dom -->
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 引入babel -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>




  <script type="text/babel">

    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          name: 'Jennie Ruby Jane',
          num: 3
        }

        this.minus = this.minus.bind(this)
      }

      add() {
        this.setState({
          num: this.state.num + 1
        })
      }

      minus() {
        this.setState({
          num: this.state.num - 1
        })
      }

      render() {
        const { num } = this.state;
        return (
          <div>
            <p>{this.state.num}</p>
            <button onClick={this.minus}>-</button> <button onClick={this.add.bind(this)}>+</button>

          </div>
        )
      }
    }

    const root = ReactDOM.createRoot(document.querySelector("#app"));
    root.render(<App />);


  </script>

</body>

</html>