JSX基本知识点

JSX即javascript XML

JSX是基于ECMAScript平台的一种新特性

一种定义带属性树结构的语法

JSX不是XML或者HTML

不是一种限制

特点：

类XML语法容易接受

增强JS语义

结构清晰

抽象程度高

代码模块化

语法：

var HelloMessage=React.createClass({

render:function(){

return <div className='test'>Hello {this.props.name}</div>

}

});

React.render(<HelloMessage name="john"/>,mountNode);

自定义组件首字母大写

组件与组件之间可以嵌套

求值表达式 “{  }”

驼峰命名

注释：可以在子节点或者属性位置添加注释

htmlFor和className

   var HelloWorld=React.createClass({
            render:function(){
                return <p /*

这是属性位置的注释

*/>hello,world{/*

这是子节点位置的注释

*/}</p>
            }
        })
        React.render(<HelloWorld></HelloWorld>,document.body);

添加css样式：

 var style={

color:red,

border:1px

}

   var HelloWorld=React.createClass({
            render:function(){
                return <p>hello,world</p>
            }
        })
        React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);

条件判断的四种写法：

{三元表达式}

使用中间变量

使用函数

使用比较运算符（或运算符）

使用闭包匿名表达式

JSX非DOM属性

dangerouslySetInnerHTML 在JSX中直接插入HTML

 var obj={
            __html:"<h1> hello react</h1>"
        };
 React.render(<div dangerouslySetInnerHTML={obj}></div>,document.body);

ref  父组件引用子组件

  var obj={
            __html:"<h1> hello react</h1>"
        }
        var HelloWorld=React.createClass({
            render:function(){
                return <p ref="child">hello,world</p>
            }
        })
        React.render(<div dangerouslySetInnerHTML={obj}></div>,document.body);

key  提高渲染性能

内容相似的尽量合并为同一个组件，在列表中尽量使用唯一的key，这样可以大幅提升性能

   var obj={
            __html:"<h1> hello react</h1>"
        }
        var HelloWorld=React.createClass({
            render:function(){
                return <ul>
                    <li key="1">1</li>
                    <li key="2">2</li>
                    <li key="3">3</li>
                </ul>
            }
        })
        React.render(<div dangerouslySetInnerHTML={obj}></div>,document.body);