jsx基本语法

jsx

全称: JavaScript XML

react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖

作用: 用来简化创建虚拟DOM

• 写法：var ele =

  Hello JSX!

• 注意1：它不是字符串, 也不是HTML/XML标签
• 注意2：它最终产生的就是一个JS对象

标签名任意: HTML标签或其它标签

标签属性任意: HTML标签属性或其它

基本语法规则

• 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
• 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

babel.js的作用

• 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
• 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
• Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用

渲染虚拟DOM(元素)

语法: ReactDOM.render(virtualDOM, containerDOM)

作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

更新已渲染的元素需要重新调用ReactDOM.render函数

参数说明

• 参数一: 纯js或jsx创建的虚拟dom对象
• 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

ReactDOM.render(
  <div>hello,world</div>,
  document.getElementById('root')
);

虚拟DOM中key的作用：

简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。

详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

• 旧虚拟DOM中找到了与新虚拟DOM相同的key：
  • 若虚拟DOM中内容没变, 直接使用之前的真实DOM
  • 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
• 旧虚拟DOM中未找到与新虚拟DOM相同的key 根据数据创建新的真实DOM，随后渲染到到页面

用index作为key可能会引发的问题

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

开发中如何选择key?

1. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2. 如果确定只是简单的展示数据，用index也是可以的。

jsx语法规则

1. 定义虚拟DOM时，不要写引号。
2. 标签中混入JS表达式时要用{}。
3. 样式的类名指定不要用class，要用className。
4. 内联样式，要用style={{key:value}}的形式去写。
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母
   • 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
   • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

// 通过使用引号，来将属性值指定为字符串字面量
const element = <div tabIndex="0"></div>;
// 使用大括号，来在属性值中插入一个 JavaScript 表达
const element = <img src={user.avatarUrl}></img>;

// JSX 防止注入攻击
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;