React-JSX

const element = <h1>Hello, world!</h1>;

这种看起来可能有些奇怪的标签语法即不是字符串也不是HTML，它被称为JSX， 一种JavaScript的语法扩展。推荐在React中使用JSX来描述用户界面, 虽然React并不强制要求使用JSX。JSX用来声明React当中的元素。

JSX语法的特点就是，凡是使用JavaScript的值的地方，都可以插入这种类似HTML的语法。

在JSX中使用表达式

你可以任意地在JSX当中使用Javacript表达式，在JSX当中的表达式要包含在大括号中。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

在编译之后，JSX其实会被转代为普通 的JavaScript对象，这也意味着，你其实可以在if或者for语句里使用JSX，将它赋值给变量，当作参数传入，作为返回值都可以。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

1、所有HTML标签必须是闭合的。

2、顶层只能有一个标签，也就是只能有一个根元素。

3、一般来说，HTML原生标签都使用小写，开发者自定义的组件标签首字母大写。

4、更正式、更通用的组件写法，要使用ES6类的语法。

5、组件内部，所有参数都放在this.props属性上面。这个对象有一个非常特殊的参数this.props.children，表示当前组件“包裹”的所有内容。

6、组件的内部状态记录在this.state这个对象上面。

7、组件的运行过程中，存在不同的阶段，react为这些阶段提供了钩子方法。

（1）componentDidMount会在组件挂载后自动调用。

（2）componentWillUnmount会在组件卸载前自动调用

（3）componentDidUpdate会在UI每次更新事调用。

（4）shouldComponentUpdate(nextProps,nextState)，每当this.props或this.state有变化，在render方法执行之前，就会调用这个方法。该方法返回一个布尔值，表示是否应该继续执行render方法，即如果返回false，UI就不会更新，默认返回true。组件挂载时，render方法的第一次执行，不会调用这个方法。

（5）static getDerivedStateFromProps(props, state)，该方法在render方法执行之前调用，包括组件的第一次挂载。它应该返回一个新的state对象，通常用在组件状态依赖外部输入的参数的情况。

（6）getSnapshotBeforeUpdate()：该方法在每次DOM更新之前调用，用来收集DOM信息。它返回的值，将作为参数传入componentDidUpdate()方法。

JSX属性

你可以使用引号来定义以字符串为值的属性：

const element = <div tabIndex="0"></div>;

也可以使用大括号来定义以JavaScript表达式为值的属性：

const element = <img src={user.avatarUrl}></img>;

因为JSX的特性更接近JavaScript而不是HTML，所以React DOM使用camelCase命名来定义属性的名称。

JSX防注入攻击

所有的内容在渲染之前都被转换成字符串，这样可以有效防止XSS攻击。

 

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

 

最后欢迎大家访问我的个人网站：1024s