看看 react 与 jsx

React 项目开发依赖

react: react 中的必须核心代码
react-dom: react 渲染在不同平台所需要的核心代码
babel: jsx 转换为 react 代码

什么是 jsx

jsx 即 javascript XML。与 react 是相互独立的东西，jsx 是语法扩展，而 react 是 js 库。

通过 cdn 引入依赖

    <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>

挂载使用 react

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello React</title>
  </head>
  <body>
    <div id="app"></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">
      const root = ReactDOM.createRoot(document.querySelector("#app"));

      const clickHandler = () => {
        console.log("click");
      };

      root.render(
        <div>
          <h2>Hello React</h2>
          <button onClick={clickHandler}>按钮</button>
        </div>
      );
    </script>
  </body>
</html>

jsx 的好处：在代码执行时，从上到下执行代码，所有过程可见。

注意：react-dom 依赖必须要在 react 依赖之后！！！

react 渲染 - render

在渲染时，react 使用一个 render 方法来渲染元素。

在 react.render() 方法中入参是一个元素或者组件

React 组件

react 编写组件将组件继承至 React.Component。同时组件名（类名）必须要首字母大写

// 类组件
class App extends React.Component {

}

root.render(<App />);

同时一个组件包含 组件数据、组件方法、render 方法

      // react 类组件
      class App extends React.Component {
        // 数据
        constructor() {
          super();
          this.state = {
            msg: "数据",
          };
        }

        // 方法
        clickHandler = () => {
          console.log("click");
        };
        // render
        render() {
          return (
            <div>
              <h2>App 类组件</h2>
              <p>{this.state.msg}</p>
              <button onClick={clickHandler}>点击</button>
            </div>
          );
        }
      }

组件数据其中分为两类：参与数据流的数据，不参与数据流的数据

参与数据流的数据

添加到构造函数中的 this.state 对象

当数据发生变化时，他通过调用 this.setState 来更新数据，并通知 React 进行 update 操作（重新调用 render)

认识jsx

const ele = <h2>{msg}</h2>;
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(ele);

区别于 js 语法，ele并非字符串
当把 text/babel删掉，会出现语法报错
这就是一段 jsx 语法代码

js 的语法扩展

jsx 基本规范

jsx 顶层只能有一个根元素，一般使用 <div></div> 或者 <></>
同时为了翻边阅读会使用小括号 () 进行包裹
jsx 中标签可以是单标签也可以是双标签

jsx 插入规范

嵌入变量作为子元素
- 当变量是 Number、String、Array 类型时，直接展示
- 当变量是 undefined、null、Boolean 时，内容为空
- Object 类型不能作为子元素

可以插入表达式

const { msg, names, counter } = this.state;
<h2>{counter + 1}</h2>

可以使用三元运算符

<h2>{ageText}</h2>
<h2>{ageText > 18 "成年人" : "未成年人"}</h2>

执行一个函数
```
<p>{this.showPList()}</p>
```

jsx 绑定属性

jsx 中绑定属性使用花括号绑定变量

const title = '标题'
// render
<h2 title={title}>标题</h2>

绑定 class 属性

使用 class 设置属性会报警告

<h2 class="msg">{msg}</h2> // 报警告， class 为关键字

在绑定 class 属性时使用 className，同样可以使用变量

render() {
    // 字符串拼接方式
    const className = 'msg counter names'
    // 数组方式
    const classList = ['msg', 'names'];
    
    return (
    	<div>
        	<p className={classList.join(' ')}>ppp</p>
        	<p className={className}>ppp</p>
        </div>
    )
}

react 事件绑定

      const root = ReactDOM.createRoot(document.querySelector("#app"));

      // react 类组件
      class App extends React.Component {
        // 数据
        constructor() {
          super();
          this.state = {
            msg: "数据",
            names: ["kobe", "petter", "lisa"],
            counter: 1,
          };
		// 绑定this
          this.clickHandler = this.clickHandler.bind(this);
        }

        // 组件方法
        clickHandler() {
          console.log("this", this);
        }
        // 箭头函数
        clickHanderII = () => {
          
        };
        // render
        render() {
          const { msg, names, counter } = this.state;

          return (
            <div>
              <h2 className="msg">{msg}</h2>
              <button onClick={this.clickHandler}>点击</button>
            </div>
          );
        }
      }

      root.render(<App />);

绑定事件需要先绑定 this。或者使用箭头函数。

还可以直接传入一个箭头函数

<button onClick={() => this.clickHanderIII()}>点击III</button>

同样可以

react 事件参数

默认点击事件会回调 event参数

clickHandler(event) {
    console.log("this", event);
}

但是当直接传入回调方式绑定事件，需要手动传递 event参数

<button onClick={(e) => this.clickHanderIII(e)}>点击III</button>

其它参数按照函数参数传递规范进行传递

react 条件渲染

在 vue 中，条件渲染有指令 v-if和 v-show
在 react 中，条件渲染遵循 js 规范

主要三种方式：

变量 boolean 值
三元运算符
&& 逻辑运算符

// react 类组件
class App extends React.Component {
    // 数据
    constructor() {
        super();
        this.state = {
            msg: "数据",
            names: ["kobe", "petter", "lisa"],
            isShow: true,
        };
    }

    // 组件方法
    clickHandler() {
        this.setState({
            isShow: !this.state.isShow,
        });
    }
    // render
    render() {
        const { msg, names, isShow } = this.state;

        return (
            <div>
                <h2 className="msg">{msg}</h2>
                {isShow ? <h2>展示</h2> : <h2>不展示</h2>}
                <div>{isShow && <div>{names}</div>}</div>
                <button onClick={() => this.clickHandler()}>修改状态</button>
            </div>
        );
    }
}