React 学习 JSX语法与原生HTML
文章目录
JSX 可以看作JavaScript的拓展，看起来有点像XML。
使用React，可以进行JSX语法到JavaScript的转换。
为什么使用JSX
使用React，不一定非要使用JSX语法，可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX，因为JSX在定义类似HTML这种树形结构时，十分的简单明了。简明的代码结构更利于开发和维护。
XML有着开闭标签，在构建复杂的树形结构时，比函数调用和对象字面量更易读。看个直接的对比：
//使用JSX
React.render(
<div>
<div>
<div>content</div>
</div>
</div>,
document.getElementById('example')
);
// 不使用JSX
React.render(
React.createElement('div', null,
React.createElement('div', null,
React.createElement('div', null, 'content')
)
),
document.getElementById('example')
);
JSX并不是新语言，也没有改变JavaScript的语法，只是对JavaScript的拓展
HTML 标签 vs. React 组件
React.render方法可以渲染HTML结构，也可以渲染React组件。
渲染HTML标签，声明变量采用首字母小写
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);
渲染React组件，声明变量采用首字母大写
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);
通过变量的声明，来区分HTML标签和React组件，这个可以看作一个约定吧
注意：标签的属性class和for，需要写成className和htmlFor。因为两个属性是JavaScript的保留字和关键字。无论你是否使用JSX
//使用JSX
React.render(
<label className="xxx" htmlFor="input">content</label>,
document.getElementById('example')
);
//不使用JSX
React.render(
React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
document.getElementById('example')
);
转化
React.createElement函数：
//JSX
var Nav;
var app = <Nav color="blue" />;
//native JS
var Nav;
var app = React.createElement(Nav, {color:"blue"});
JS表达式
表达式用{}包起来，不要加引号，加引号就会被当成字符串
JSX是HTML和JavaScript混写的语法，当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析
属性表达式
React.render(
<div className={2 > 1 ? 'class-a' : 'class-b'}>content</div>,
document.body
);
子表达式
var Nav = React.createClass({
render: function () {
return <div>nav</div>
}
});
React.render(
<div>
{2 > 1 ? <Nav/> : <div>div</div>}
</div>,
document.body
);
注释
同JavaScript注释一样
单行注释 // comments
多行注释 /* comments */
JSX延伸属性
不要改变props
如果提前就知道了组件的属性的话，写起来很容易。例如component组件有两个动态的属性foo和bar：
var component = <Component foo={x} bar={y} />;
而实际上，有些属性可能是后续添加的，我们没办法一开始就确定，我们可能会写出下面不好的代码：
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad
这样写是错误的，因为我们手动直接添加的属性React后续没办法检查到属性类型错误，也就是说，当我们手动添加的属性发生类型错误时，在控制台是看不到错误信息的
在React的设定中，初始化完props后，props是不可变的。改变props会引起无法想象的后果
延伸属性
为了解决这个问题，React引入了属性延伸
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
当需要拓展我们的属性的时候，定义个一个属性对象，并通过{...props}的方式引入，React会帮我们拷贝到组件的props属性中。重要的是—这个过程是由React操控的，不是手动添赋值的属性
需要覆盖的时候可以这样写：
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
JSX 陷阱
style属性
在React中写行内样式时，要这样写，不能采用引号的书写方式
React.render(
<div style={{color:'red'}}>
xxxxx
</div>,
document.body
);
HTML转义
比如我们有一些内容是用户输入的富文本，从后台取到数据后展示在页面上，希望展示相应的样式
var content='<strong>content</strong>';
React.render(
<div>{content}</div>,
document.body
);
结果页面直接输出内容了
<stonrg>content</strong>
React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以这么写
var content='<strong>content</strong>';
React.render(
<div dangerouslySetInnerHTML={{__html: content}}></div>,
document.body
);
自定义HTML属性
如果在编写React过程中使用了自定义属性，React不会渲染的
React.render(
<div dd='xxx'>content</div>,
document.body
);
要想使用得这么写：
React.render(
<div data-dd='xxx' aria-dd='xxx'>content</div>,
document.body
);