React对象表现形式以及其它特性

1.html标签对象表现形式。

//形式1

const e = (
  <h1 className="dd">
    hello world
   </h1>
);
//形式2
const r = React.createElement(
  'h1',
  {className:'dd'},
  'hello world'
);
//形式3
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};


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

以上三种表示标签的形式，注意看不同点

• 1.除了形式3是以{}之外，形式1和形式2是以()，这也说明了，形式3不能直接被渲染。
• 2.仔细看一下形式3发现是json格式，也就是它把html标签格式成json数据形式
• 3.形式二React.createElement() 算是React中间过渡产物，也就是标准化中间层产物

2.使用JSX去表示属性 （拿官网的例子）

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

//JSX表示，就是可以用变量表示，注意的是{}，第二不要“{}” 将引起来，会被当做普通字符串对待

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

//如果没有内容可以用单标签

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

//也可以包含多个子标签(注意必须只有一个根标签)

const element = (
  <div>
    <h1>第一行</h1>
    <h2>第二行</h2>
  </div>
)

3.它像java一样遵循驼峰命名法

4.它可以防止XSS（cross-site-scripting）攻击(跨站脚本攻击)

const title = response.potentiallyMaliciousInput;

const element = <h1>{title}</h1>;

//原理就是每个进行渲染必须是显式定义的字符串