基本使用

结构

  <div id="root"></div>
    
  <script type="text/babel">
    // 编写React代码(jsx语法)
    // jsx语法 -> 普通的JavaScript代码 -> babel

    // 渲染Hello World
    // React18之前: ReactDOM.render
    ReactDOM.render(<h2>Hello World</h2>, document.querySelector("#root"))

    // React18之后:
    //定义根组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    //渲染根组件
    root.render(<h2>Hello World</h2>)
  </script>

组件化开发(类组件/函数式组件)

类组件

a. 定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component

b. 实现当前组件的render函数，render当中返回的jsx内容，就是之后React会帮助我们渲染的内容

1. 封装前

<div id="root"></div>
 <!-- 编写React代码 -->
  <script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"))

    // 1.将文本定义成变量
    let message = "Hello World"

    // 2.监听按钮的点击
    function btnClick() {
      // 1.1.修改数据
      message = "Hello React"

      // 2.重新渲染界面
      rootRender()
    }

    // 3.封装一个渲染函数
    function rootRender() {
      root.render((
        <div>
          <h2>{message}</h2>
          <button onClick={btnClick}>修改文本</button>
        </div>
      ))
    }
    rootRender()

  </script>

2. 类组件使用

 class App extends React.Component {
      // 组件数据
      constructor() {
        super()
        this.state = {
          message: "Hello World",

          name: "why",
          age: 18
        }

        // 对需要绑定的方法, 提前绑定好this
        this.btnClick = this.btnClick.bind(this)
      }

      // 组件方法(实例方法)
      btnClick() {
        // 内部完成了两件事情: 
        // 1.将state中message值修改掉 2.自动重新执行render函数
        this.setState({
          message: "Hello React"
        })
      }

      // 渲染内容 render方法
      render() {
        return (
          <div>
            <h2>{this.state.message}</h2>
            <button onClick={this.btnClick}>修改文本</button>
          </div>
        )
      }
    }
    // 将组件渲染到界面上
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    // App根组件
    root.render(<App/>)

数据依赖

在组件中的数据，我们可以分成两类：

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

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

• 参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中

  在构造函数中 this.state = {定义的数据}

  当数据发生变化时，我们可以调用 this.setState来更新数据，并且通知React进行update操作；

  在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面

 constructor() {
        super()
        this.state = {
          message: "Hello World",
          counter: 100
        }

this绑定问题

    // this绑定的问题
    const app = new App()//类App创建实例
    const foo = app.btnClick
    foo(); // 默认绑定 => window =>（类里面的方法 默认是严格模式） => undefined

    function bar() {
      console.log("bar:", this);
    }
    bar()//bar: undefined 因为babel编译后，开启严格模式

• 解决

在 constructor 里面绑定this 或 使用 在render里面使用 bind绑定

      constructor() {
        // 对需要绑定的方法, 提前绑定好this
        this.btnClick = this.btnClick.bind(this)
      }
      
      render() {
        return (
          <div>
            <button onClick={this.btnClick.bind(this)}>修改文本</button>
          </div>
        )
      }