【前端知识】React基础巩固(四)——组件化

React基础巩固(四)——组件化

组件化

数据依赖

数据在哪里定义?

  • 参与数据流(参与界面更新的数据:当数据变更时,需要更新组件渲染内容)定义在当前对象的state中。通过在构造函数中this.state = {定义数据}。当数据发生变化时,通过调用this.setState来更新数据,并且通知React进行update操作。在进行update操作时,会重新调用render函数,并且使用最新的数据来渲染界面。
  • 不参与界面更新的数据:当数据变更时,不需要更新组件渲染内容。

事件绑定

事件绑定中的this指向谁?

  • 默认情况下是 undefined
  • 在正常DOM操作中,监听函数中的this其实是节点对象
  • 由于React并不是直接渲染成真实的DOM,我们所编写的button只是一个语法糖,其本质是React的Element对象
  • 故监听时,react在执行函数时并没有绑定this,默认情况下即为undefined
  • 所以在传入函数时,需要绑定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>Documenttitle>
  head>
  <body>
    <div id="root">div>

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

    <script type="text/babel">
      // 使用组件进行重构代码
      // 1.类组件  2.函数式组件
      class App extends React.Component {
        // 组件数据
        constructor() {
          super();

          this.state = {
            message: "hello world",
          };

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

        // 组件方法(实例方法)
        btnClick() {
          // setState内部完成:1.修改message的值 2.自动重新执行render函数
          this.setState({
            message: "hello react",
          });
        }

        // 渲染内容
        render() {
          return (
            <div>
              <h2>{this.state.message}</h2>
              <button onClick={this.btnClick.bind(this)}>修改文本</button>
              <br/>在constructor中提前绑定this
              <button onClick={this.btnClick}>修改文本</button>
            </div>
          );
        }
      }

      // this绑定的问题
      // const app = new App()
      // const foo = app.btnClick
      // foo(); // 默认绑定 => window => 严格模式下 => undefined
      // function bar(){
      //     console.log("bar:", this);
      // }
      // bar();

      // 将组件渲染到界面上
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    script>
  body>
html>

你可能感兴趣的:(前端知识,React,react.js,前端,javascript)