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

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

//形式1

const e = (  <h1 className="dd">    hello world   </h1>);//形式2const r = React.createElement(  'h1',  {className:'dd'},  'hello world');//形式3const 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去表示属性 （拿官网的例子）

constelement=<divtabIndex="0"></div>;

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

constelement=<imgsrc={user.avatarUrl}></img>;

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

constelement=<imgsrc={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>;

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