React基础：JSX前言 jSX和html比较元素结构：一摸一样属性：JSX 使用 camelCase（小驼峰命名

前言

jSX和html比较

元素结构：一摸一样
属性：JSX 使用 camelCase（小驼峰命名）来定义属性的名称，HTML使用属性名称的命名约定。
属性值&元素值:JSX使用{}包裹

特性 & `React.createElement`

`JSX` 防止注入攻击

你可以安全地在 JSX 当中插入用户输入内容：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

JSX 表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

示例

实现 +1 -1

html写法

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>react初识</title>
</head>

<body>
  <div id="root">
    <p>计数：<span id="number">0</span></p>
    <button class="addBtn" onClick="handleAdd()">+1</button>
    <button class="reduceBtn" onClick="handleReduce()">-1</button>
  </div>

  <script>
    const numberElement = document.getElementById('number')

    function handleAdd() {
      const numberText = parseInt(number.innerText)
      numberElement.innerText = numberText + 1
    }
    
    function handleReduce() {
      const numberText = parseInt(number.innerText)
      numberElement.innerText = numberText - 1
    }
  </script>

</body>

</html>

JSX写法

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>react初识</title>
</head>

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

  <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/babel.min.js"></script>

  <script type="text/babel">
    let number = 0
    function handleAdd() {
      number++
      const reactElement = generateReactElement(number)
      ReactDOM.render(reactElement, document.getElementById('root'))
    }
    function handleReduce() {
      number--
      const reactElement = generateReactElement(number)
      ReactDOM.render(reactElement, document.getElementById('root'))
    }
    function generateReactElement(number) {
      return (
        <div>
          <p>计数：<span id="number">{number}</span></p>
          <button className="addBtn" onClick={handleAdd}>+1</button>
          <button className="reduceBtn" onClick={handleReduce}>-1</button>
        </div>
      )
    }
    ReactDOM.render(generateReactElement(number), document.getElementById('root'))
  </script>

</body>

</html>

state管理

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>react初识</title>
</head>

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

  <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/babel.min.js"></script>

  <script type="text/babel">
    class Count extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          number: 0
        }
        this.handleAdd = this.handleAdd.bind(this)
        this.handleReduce = this.handleReduce.bind(this)
      }

      handleAdd() {
        console.log(this)
        this.setState({ number: this.state.number + 1 })
      }

      handleReduce() {
        this.setState({ number: this.state.number - 1 })
      }

      render() {
        return (
          <>
            <p>计数：<span id="number">{this.state.number}</span></p>
            <button className="addBtn" onClick={this.handleAdd}>+1</button>
            <button className="reduceBtn" onClick={this.handleReduce}>-1</button>
          </>
        )
      }
    }
    ReactDOM.render(<Count />, document.getElementById('root'))
  </script>

</body>

</html>

React基础：JSX

前言

特性 & React.createElement

JSX 防止注入攻击