react

React Js

使用create-react-app快速搭建react环境

npm install create-react-app -g
cd test_dir
create-react-app demo_react
cd demo_react
npm start

react的组件中的state必须是一个javascript对象

1.环境

依次引入一下文件

<!-- react 框架核心文件 -->
<script src='react.js'></script>

<!-- react 与DOM操作相关 -->
<script src='react-dom.js'></script>

<!-- 将jsx语法转换为javascript语法 -->
<script src='browser.min.js'></script>

2.ReactDOM.render

<div id='box'></div>
<!-- 注意这里的type类型是babel -->
<script type='text/babel'>
    ReactDOM.render(
        <h1>hello react!</h1>,
        document.getElementById('box')
        )
</script>

3.{}支持javascript语法解析

<div id='box'></div>
<script type='text/babel'>
    var names=['Tom','James','Leo','Alice','Green'];
    ReactDOM.render(
        <div>
            {
                names.map(function(name)
                {
                    return <div>hello name</div>
                })
            }
        </div>
        )
</script>

4.组件

<div id='box'></div>
<script type='text/babel'>
    // 组件的首字母必须大写
    var Hello=React.createClass({
            render:function(){
                return <h1>hello {this.props.name}</h1>
            }
        })
    ReactDOM.render(
            <Hello name='llz'></Hello>,
            document.getElementById('box')
        )
</script>

5.this.props.children

<div id='box'></div>
<script type='text/babel'>
    var Name=React.createClass({
            render:function(){
                return <ul>
                   {
                        React.Children.map(this.props.children,function(child){
                                return <li>{child}</li>   
                            })
                   }
                </ul>
            }
        })
    ReactDOM.render(
            <Name>
                 <span>llz</span>
                 <span>ljw</span>
                 <span>dsb</span>
            </Name>,
            document.getElementById('box')
        )
</script>

6.PropTypes

<div id='box'></div>
<script type='text/babel'>
    var Hello=React.createClass({
        <!-- 设置属性的验证机制 -->
            propTypes:{
                <!-- 如果title属性的值不是字符串类型则会报错 -->
                title:React.PropTypes.string.isRequired
            },
            render:function(){
                return <h1>{this.props.title}</h1>
            }
        })
    ReactDOM.render(
            <Hello title={'test'}></Hello>,
            document.getElementById('box)
        )
</script>

7.getDefaultProps

<div id='box'></div>
<script type='text/babel'>
    var Hello=React.createClass({
        <!-- 设置属性的默认值 -->
            getDefaultProps:function(){
                return {title:'test'}
            },
            render:function(){
                return <h1>{this.props.title}</h1>
            }
        })
    ReactDOM.render(
            <Hello></Hello>,
            document.getElementById('box')
        )
</script>

8.refs

<div id='box'></div>
<script type='text/babel'>
    var Hello=React.createClass({
            handleClick:function(){
                <!-- 根据ref获取对应的真实DOM -->
                this.refs.text.value=1;
            },
            render:function(){
                return <div>
                    <input type="text" ref='test'>
                    <button onClick={this.handleClick}>click</button>
                </div>
            }
        })
    ReactDOM.render(
            <Hello></Hello>,
            document.getElmentById('box')
        )
</script>

9.state

<div id='box'></div>
<script type='text/babel'>
    var Say=React.createClass({
            <!-- 初始化状态 -->
            getInitialState:function(){
                return {word:false}
            },
            handleClick:function(){
                this.setState({word:!this.state.word})
            },
            render:function(){
                return <div>
                    <h1>say {this.state.word?'yes':'no'}</h1>
                    <button onClick={this.handleClick}>change</button>
                </div>
            }
        })
    ReactDOM.render(
            <Say></Say>,
            document.getElementById('box')
        )
</script>

10.表单

<div id='box'></div>
<script type='text/babel'>
    var Say=React.createClass({
            getInitialState:function(){
                return {word:'hello'}
            },
            handleClick:function(event){
                this.setState({word:event.target.value})
            },
            render:function(){
                return <div>
                    <input type="text" onChange={this.handleClick} />
                    <h1>say {this.state.word}</h1>
                </div>
            }
        })
    ReactDOM.render(
            <Say></Say>,
            document.getElementById('box')
        )
</script>

11.组件的生命周期

• constructor

组件整个生命周期第一个被调用的构造函数

在es6中，类的成员函数在执行时的this并不是和类实例自动绑定的，
而在构造函数中this就是当前组件实例，所以为方便后期调用，
往往在构造函数中对特定函数绑定this:
this.onClick=this.onClick.bind(this)

• getInitialState & getInitialProps

两者只在使用React.createClass创建组件时可用
在es6中:
Sample.defaultProps={return {sampleProp:0}}

• componentWillMount & componentDidMount

componentWillMount在render函数被调用前执行
componentDidMount在render函数执行完，组件装载在DOM树上后执行，如果同时引入多个该组件，那么
该函数会在所有组件的render执行完成挂载后才会依次执行。

以上两个函数只在初次渲染时执行一次。

<div id="box"></div>
<script type="text/babel">
    var Say=React.createClass({
        componentWillMount:function(){
            console.log('will mount');
        },
        componentDidMount:function(){
            console.log('did mount')
        },
        componentWillUpdate:function(){
            console.log('will update')
        },
        componentDidUpdate:function(){
            console.log('did update')
        },
        componentWillUnmount:function(){
            console.log('will unmount')
        },
        getInitialState:function(){
            return {word:true}
        },
        handleClick:function(){
            this.setState({word:!this.state.word})
        },
        render:function(){
            return <div>
                <h1>say {this.state.word?'yes':'no'}</h1>
                <button onClick={this.handleClick}>change</button>
            </div>
            
        }
    })
    ReactDOM.render(
        <Say></Say>,
        document.getElementById('box')
    )
</script>

12.ajax