React 入门语法

2017-02-23 本文已影响521人天外来人

React 的开发准备：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

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(
        <ul>
          <li>男装</li>
          <li>女装</li>
        </ul>
      )
    }
});
ReactDOM.render(<Uls><Uls>, 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 (
      <div>
        <span>{name}</span>
        <span>{oDate.getHours() > 12 ? '下午好':'上午好'}</span>
      </div>
    );
  }
});
ReactDOM.render(<Header></Header>,document.getElementById('example'));

注意点：

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

列表渲染

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

var List = React.createClass({
  createLi: function() {
    var arr = ['苹果’, '梨', '橘子'];
    return arr.map(function(index, value){
      return (<li>{value}</li>);
    });
  },
  render: function() {
    return (
      <ul>{this.createLis()}</ul>
    );
  }
});
React.render(<List></List>, 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 (
                <li key={index}>{value}</li>
            );
        });
    }, 
    render: function(){
        return (
            <ul>{this.getTitle()}</ul>
        );
    }
});

ReactDOM.render(<List titleData={['北京','天津']}></List>, 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 (
            <div>
                <ul>
                    <li style={{display: this.state.num % 3 == 0 ? 'block' : 'none'}}>111 111 111</li>
                    <li style={{display: this.state.num % 3 == 1 ? 'block' : 'none'}}>222 222 222</li>
                    <li style={{display: this.state.num % 3 == 2 ? 'block' : 'none'}}>333 333 333</li>
                </ul>
                <span onClick={this.changeNav}>换一换</span>
            </div>
        );
    }
});
ReactDOM.render(<Nav></Nav>, document.getElementById('header'));

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