React 入门语法

---

React 的开发准备：

React 开发用到的库有：

• react.js 是React 的核心库
• react-dom.js 是提供与DOM相关的功能
• Browser.js 的作用是将JSX语法转为JavaScript语法。

React 的基本语法：

React 对象：是React库的入口。

下面是一些常见的API:
createElement:定义一个虚拟dom

React.createElement(参数一，参数二，参数三);

• 参数一：表示虚拟dom的名称（可以是任意元素的名称，也可以是一个组件的名称）
• 参数二：表示虚拟dom的一些必要的属性（比如：id, className, title等）
• 参数三：表示虚拟dom的子元素 （若是文本节点，可以直接书写，不必书写createElement）

var ul = React.createElement(
    'ul',
    null,
    React.createElement('li', null, '男士'),
    React.createElement('li', null, '女士')
)

React.createClass:创建一个组件类

React.createClass({对象});

• 参数是一个对象，对象的属性或方法是对组件的说明。
• 有个必要方法render：将虚拟dom树输出
• 组件类的名字第一个字母必须大写。
• 组件类只能包含一个顶层标签，否则也会报错。

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

          
男装
          
女装
        
      )
    }
});
ReactDOM.render(, document.getElementById('example'));

ReactDom对象: 操作dom

ReactDOM.render 方法: 是将虚拟dom渲染到页面

ReactDom.render(参数一，参数二，参数三);

• 第一个参数：表示虚拟dom
• 第二个参数：表示真实dom容器元素
• 第三个参数：表示一个回调函数

其他语法

JSX中插值

插值：向虚拟DOM中动态的插值(可以插入元素内容中，也可以插入元素属性中)
语法：大括号{}

var Header = React.createClass({
  render: function(){
    var name = 'Jack';
    var oDate = new Date();
    return (
      

        {name}
        {oDate.getHours() > 12 ? '下午好':'上午好'}
      
    );
  }
});
ReactDOM.render(
,document.getElementById('example'));

注意点：

• JSX中 不能使用if else语句，但是可以使用三元运算表达式来代替。
• JSX中 注释需要写在花括号中。

列表渲染

JSX 遇到数组，会自动展开所有成员

var List = React.createClass({
  createLi: function() {
    var arr = ['苹果’, '梨', '橘子'];
    return arr.map(function(index, value){
      return (
{value}
);
    });
  },
  render: function() {
    return (
      
{this.createLis()}
    );
  }
});
React.render(, document.getElementById('example'));

两个描述性的属性

Props 属性：

props 是在组件创建时候提供的，往往是不会更改的。
获取属性：this.props
设置默认属性：getDefaultProps

var List = React.createClass({
    getDefaultProps: function() {
        return {
            titleData: ['默认标题']
        };
    },
    getTitle: function(){
        return this.props.titleData.map(function(value, index){
            return (
                
{value}
            );
        });
    }, 
    render: function(){
        return (
            
{this.getTitle()}
        );
    }
});

ReactDOM.render(, document.getElementById('example'));

State状态，

组件内部维护的一个数据，通常在组件发生交互时候发生改变。
获取属性：this.state
设置默认属性：getInitialState
改变状态：this.setState

var Nav =React.createClass({
    changeNav: function() {
        this.setState({
            num: this.state.num+1
        });
    },
    getInitialState: function(){
        return {
            num : 0
        }
    },
    render: function(){
        return (
            

                

                    
111 111 111
                    
222 222 222
                    
333 333 333
                
                换一换
            
        );
    }
});
ReactDOM.render(
, document.getElementById('header'));

State 与 props 比较
相同点：在改变的时候，都会触发render函数
区别：props 是在组件创建时候提供的，往往是不会更改的；state 在组件发生交互的时候改变。