JSX语法&React元素和组件的区别

1. 什么是JSX？
JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。如果 JSX 标签是闭合式的，那么你需要在结尾处用 />, 就好像 XML/HTML 一样。
2. JSX语法和JS原生语法的比较
Js语法代码

var child1 = React.createElement('li', null, 'First Text Content');var child2 = React.createElement('li', null, 'Second Text Content');var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

JSX语法代码

var root =(  <ul className="my-list">    <li>First Text Content</li>    <li>Second Text Content</li>  </ul>);

他们是等价的，JSX 代码的外面扩上一个小括号，这样可以防止 分号自动插入 的bug。Babel 转义器会把 JSX 转换成一个名为 React.createElement() 的方法调用。
3. JSX实现事件直接绑定到元素上
Submit
和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。
注意：
React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。尽管整个事件系统由React管理，但是其API和使用方法与原生事件一致。
4. JSX语法怎么样定义CSS样式
在JSX中使用样式和真实的样式也很类似，通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对象。
代码举例:

<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>或者var style = {  color: '#ff0000',  fontSize: '14px'};var node = <div style={style}>HelloWorld.</div>;

要明确记住,{}里面是JS代码,这里传进去的是标准的JS对象。在JSX中可以使用所有的的样式，基本上属性名的转换规范就是将其写成驼峰写法，例如“background-color”变为“backgroundColor”, “font-size”变为“fontSize”，这和标准的JavaScript操作DOM样式的API是一致的。

以上内容参考：http://www.cnblogs.com/zourong/p/6043914.html

5. JSX防注入攻击
React DOM 在渲染之前默认会 过滤 所有传入的值，你可以放心地在 JSX 当中使用用户输入。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

6. React元素与组件的区别
组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数。

React元素
React 元素（React element），它是 React 中最小基本单位。
创建一个react元素：
const element =

I’m element

React 元素不是真实的 DOM 元素，它仅仅是 js 的普通对象（plain objects），所以也没办法直接调用 DOM 原生的 API。
只有在这个元素渲染被完成后，才能通过选择器的方式获取它对应的 DOM 元素。不过，按照 React 有限状态机的设计思想，应该使用状态和属性来表述组件，要尽量避免 DOM 操作，即便要进行 DOM 操作，也应该使用 React 提供的接口ref和getDOMNode()。一般使用 React 提供的接口就足以应付需要 DOM 操作的场景了，因此像 jQuery 强大的选择器在 React 中几乎没有用武之地了。
除了使用 JSX 语法，我们还可以使用 React.createElement() 和 React.cloneElement() 来构建 React 元素。
React.createElement()创建元素举例：

var child1 = React.createElement('li', null, 'First Text Content');var child2 = React.createElement('li', null, 'Second Text Content');var root = React.createElement('ul', { className: 'my-list' }, child1, child2);var Hello = React.createClass({            render: function() {                var span = <span a="1">VaJoy</span>;                var newSpan = React.cloneElement(span, {b:'2'}, <em>CNBlog</em>);                console.log(newSpan.props);                return <div>Hello {span},{newSpan}</div>; //Hello VaJoy,CNBlog            }        });        React.render(<Hello />, document.body);        ```createElement 的第一个参数必须是字符串或 ReactClass，而在 cloneElement 里第一个参数应该是 ReactElement：React.cloneElement()示例：基本语法结构：React.cloneElement(  element,  [props],  [...children])克隆并返回一个新的 ReactElement （内部子元素也会跟着克隆），新返回的元素会保留有旧元素的 props、ref、key，也会集成新的 props（只要在第二个参数中有定义）。

var Li = React.createClass({
render: function() {
return

{this.props.i}

}
});
var Ul = React.createClass({
deal : function(child, index){
//注意下面这行换成 createElement 会报错！因为child是ReactElement而不是ReactClass或字符串
return React.cloneElement(child, {i:index});
},
render: function() {
return

{this.props.children.map(this.deal)}

;
}
});

    React.render((        <Ul>            <Li i="9" />            <Li i="8" />            <Li i="7" />        </Ul>    ), document.body);    ```

React元素也可以是用户自定义的组件：
当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。

例如,这段代码会在页面上渲染出”Hello,Sara”:

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;}const element = <Welcome name="Sara" />;ReactDOM.render(  element,  document.getElementById('root'));

我们来回顾一下在这个例子中发生了什么：

我们对元素调用了ReactDOM.render()方法。
React将{name: ‘Sara’}作为props传入并调用Welcome组件。
Welcome组件将

Hello, Sara

元素作为结果返回。
React DOM将DOM更新为

Hello, Sara

。
警告:
组件名称必须以大写字母开头。
例如，

表示一个DOM标签，但表示一个组件并限定了它的可用范围。

React组件
组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。
React 中有三种构建组件的方式。React.createClass()、ES6 class和无状态函数。

React.createClass()
React.createClass()是三种方式中最早，兼容性最好的方法。在0.14版本前官方指定的组件写法。

var Greeting = React.createClass({
render: function() {
return

Hello, {this.props.name}

;
}
});
ES6 class
ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，但它的实现仍是调用React.createClass()来实现了，ES6 class的生命周期和自动绑定方式与React.createClass()略有不同。

class Greeting extemds React.Component{
render: function() {
return

Hello, {this.props.name}

;
}
};
无状态函数：函数定义组件
无状态函数是使用函数构建的无状态组件，无状态组件传入props和context两个参数，它没有state，除了render()，没有其它生命周期方法。

function Greeting (props) {  return <h1>Hello, {props.name}</h1>;}

字面上来看，它就是一个JavaScript函数。
React.createClass()和ES6 class构建的组件的数据结构是类，无状态组件数据结构是函数，它们在 React 被视为是一样的。

以上内容参考：https://segmentfault.com/a/1190000008587988

m/benweet/stackedit

function Greeting (props) {  return <h1>Hello, {props.name}</h1>;}

字面上来看，它就是一个JavaScript函数。
React.createClass()和ES6 class构建的组件的数据结构是类，无状态组件数据结构是函数，它们在 React 被视为是一样的。

以上内容参考：https://segmentfault.com/a/1190000008587988