React02-JSX 语法

一、React 基础知识

1. React.createElement

React.createElement 是 jsx 语法的编译结果，这个函数用来创建一个 React 元素，它的返回值是一个 Virtual DOM（虚拟DOM）。

React.createElement(type, props, ...children)

第一个参数为元素类型，可以是标签名或组件名，第二个参数为元素属性，第三个参数为子节点列表。

const html1 = <h1>hello</h1>;
const html2 = React.createElement('h1', null, 'hello');

以上2种写法是等价的，可以看到使用 jsx 语法更加简介直观。

2. ReactDOM.render

ReactDOM.render(cpn, dom) 方法用来将一个 react 组件渲染到 DOM 元素上。

第一个参数为要渲染的组件，可以是 jsx 语句；第二个参数为要渲染到的真实 DOM 元素。

ReactDOM.render(<h1>hello</h1>, document.getElementById('reactApp'));

二、定义组件

1. 类组件

使用关键字 class 定义的组件。需要继承 React.Component 类，重写 render 方法，在 render 方法中返回 jsx 语法定义的组件。

// 类组件
export default class Person extends React.Component {
  render() {
    return <div>hello world</div>;
  }
}

2. 函数组件

使用关键字 function 定义的组件。返回 jsx 语法定义的组件。

export default function Person() {
  return <div>hello web</div>;
}

3. 注意事项

(1) 组件名的首字母必须大写，首字母大小写是 react 区分组件和普通标签的方法。

(2) 组件中返回的 jsx 代码必须有且只有1个顶层标签。

4. 组件嵌套

父组件嵌套子组件，将子组件的组件名当作标签名按标签的方式使用即可。

// 子组件
function Son() {
  return <div><p>这是子组件</p></div>;
}

// 父组件
export default function Father() {
  // return <div><h3>这是父组件</h3><Son></Son></div>;
  return <div><h3>这是父组件</h3><Son /></div>; // 和上面一句写法等价
}

注意： 组件当作标签使用的时候，必须是闭合标签。

三、JSX 语法

JSX 是 JS 的扩展语言，本质还是 JS。

1. 表达式

jsx 使用 { expression } 的方式获取表达式的值。

在 jsx 中如果需要使用 js 表达式，需要写在花括号（{}）内。

const name = 'zhangsan';
export default function Person() {
  return <div><h3>{ name }</h3></div>;
}

在页面渲染时，name 会被渲染成 zhangsan。

jsx 本身也是一个表达式，可以定义一个 jsx 表达式变量，可以在创建组件时直接返回此变量。

const name = 'lisi';
const html = <div><h3>{ name }</h3></div>;
export default function Person() {
  return html;
}

2. 属性

此外，还可以在 jsx 中加入属性。

export default function Person() {
  return <div id="div"><h3></h3></div>;
}

如果我们直接用 html 的方式定义属性，那渲染到页面后，Person 组件中 div 的 id 就是 div。

如果想要用表达式作为属性值，同样也是使用花括号。

const div = 'div1';
export default function Person() {
  return <div id={div}><h3></h3></div>;
}

这时 div 的 id 就为 div1。

无论在 jsx 内容还是属性或者是 jsx 本身，都可以使用 js 表达式。

3. className

jsx 中不能使用 class 给元素添加类名。jsx 中 jsx 本身也是 js，在 js 中 class 是 js 的关键字，因此需要使用 className 给元素添加类名。

const div = 'div1';
const className = 'div2';
export default function Person() {
  return <div id={div} className={ className }><h3></h3></div>;
}

这时 div 就有了一个 class 为 div2。

4. jsx 自动展开数组

在 jsx 中，数组会自动进行展开。

const arr = ['zhangsan', 'lisi', 'wangwu'];
export default function Person() {
  return <div>{ arr }</div>;
}

此时页面上将渲染出 zhangsanlisiwangwu：

也可以使用数组来渲染一组标签：

const arr = [<p key='1'>c++</p>, <p key='2'>python</p>, <p key='3'>php</p>];
export default function Person() {
  return <div>{ arr }</div>;
}

在页面上将渲染为一组 p 标签：

 5. 三元运算

在 jsx 中可以使用三元表达式来控制某个元素是否渲染。

const bl = true;
export default function Person() {
  return <div>{ bl ? <h3>hello world</h3> : null }</div>;
}

当 bl 为 true 时，页面上会渲染出 h3 标签；当 bl 为 false 时，就不渲染。

这个功能还有一种更简单的方式：

const bl = true;
export default function Person() {
  return <div>{ bl && <h3>hello world</h3> }</div>;
}

使用且运算，当 bl 会真时，继续向后运算；bl 为假时，就终止。

6. 循环

要在 jsx 中使用循环，需要使用 map。

const arr = [{ id: 1, name: 'zhangsan', age: 10 }, { id: 2, name: 'lisi', age: 15 }, { id: 3, name: 'wangwu', age: 20 }];
export default function Person() {
  return <div>
    <ul>
      { arr.map(item => <li key={ item.id }>{ item.name }，{ item.age }</li>) }
    </ul>
  </div>;
}

7. 事件

on + 事件名 给组件标签添加事件。

• 事件名的首字母必须大写。
• 类组件中的 jsx 中的 this 指向实例对象。

export default function Person() {
  function fn() {
    console.log('hello world');
  }
  return <div>
    <button onClick={fn}>按钮</button>
  </div>;
}

点击按钮时，控制台就会打印出 hello world。

可以给函数 fn 传递参数，遵循以下规则。

函数传参：

(1) 默认传递一个参数事件对象

按钮的点击事件会默认传入一个事件对象，我们可以使用一个参数来接收。

export default function Person() {
  function fn(e) {
    console.log(e); // SyntheticBaseEvent 事件对象
  }
  return <div>
    <button onClick={fn}>按钮</button>
  </div>;
}

(2) 通过箭头函数自定义传参

export default function Person() {
  function fn(e, a) {
    console.log(e); // SyntheticBaseEvent 事件对象
    console.log(a); // hello
  }
  return <div>
    <button onClick={(event) => fn(event, 'hello')}>按钮</button>
  </div>;
}

这里我们使用一个箭头函数作为按钮的点击事件，接收事件对象并和其他参数一起传递给 fn。

(3) 通过 bind 方法

export default function Person() {
  function fn(e, a) {
    console.log(e); // world
    console.log(a); // SyntheticBaseEvent 事件参数
  }
  return <div>
    <button onClick={fn.bind(null, 'world')}>按钮</button>
  </div>;
}

使用 bind 方法也可以实现自定义传参，此时第一个参数为 bind 方法传入的 world，第二个参数是事件对象。