（1）前端React入门学习--基础入门部分（快速了解）

1、React不是一个完整的mvc，mvvm框架。

2、React和Web Components不冲突，使用React可以实现一个真正的Web Component。

3、React的特点是轻，本质是virtual DOM和单向绑定。

4、组件化的开发思路，复杂场景的高性能，重用组件库，组件组合。

5、最好有扎实的基础，JS，CSS基础，Sass，compass，前端自动化方案，Yeoman，Grunt，Webpack，CommonJs，nodejs，git，github等等。

6、比如说下面这个例子，

var Hello=React.createClass({
    render:function(){
        return <div>Hello {this.props.name}</div>
    }
})

React.render(<Hello name="World"/>,document.getElementById('container'));

（1）React组件包括自定义组件和原生的组件，首先这个Hello自定义组件中的div并不是一个真实的DOM结点，在react看来只是一个react div components的实例。

（2）组件通过React.render()方法来显示在页面上，第一个参数是我们要渲染的组件component，第二个参数是组件渲染完要插入的位置的容器Element，这个就是将自定义组件Hello的渲染结果插入到id为container的div容器里面。

（3）关于样式，我们可以使用内联样式和CSS定义样式，就在div标签里写

 return <div style={{color:'red'}}>Hello {this.props.name}</div>

也可以这样写：

扫描二维码关注公众号，回复： 2182691 查看本文章

var Hello=React.createClass({
    render:function(){
        var styleObj={
            color:'red',
            fontSize:'44px',
        }
        return <div style={styleObj}>Hello {this.props.name}</div>
    }
})

7、React component的生命周期

（1）Mounted是React Component被render解析生成对应的DOM结点，并插入浏览器的DOM的一个过程。但是注意的是其实我们在浏览器能从无到有看到有显示结果的时候，Mounted这个过程已经结束了。

（2）Update是一个mounted的React component的组件重新被render的过程，只有在最新的state与最近一次的state比较发生DOM结构变化，那么DOM结构才会变化（这里和react native中的this.state一样）

（3）Unmounted是一个mounted的React Component对应的DOM结点被从DOM结构中移除的这样一个过程。

每一个状态都封装了响应的hock函数：

（1）在Mounted中，getDefaultProps()和getinitialState()方法就是定义初始的props和state。

（2）在update中，如果要接收一个新的props，那么componentWillRecetiveProps这个函数会被调用，函数参数就是新的props，shouleComponentUpdate()函数是判断是否要去更新DOM结构，参数有两个，分别是新的props对象和state对象，函数返回true就是修改DOM结构。

（3）在componentWillUnmounted中，我们可以做一个内存释放，clear等工作，但是得益于浏览器的垃圾回收机制，我们这个都用的很少，包括其他的hock函数都是很少用到。

8、React-Event-Listener（事件监听）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/jsx">
        var TestClickComponent=React.createClass({
            handleClick:function(event){
                var tipE=React.findDOMNode(this.refs.tip);
                if(tipE.style.display==='none'){
                    tipE.style.display='inline';
                }else{
                    tipE.style.display='none';
                }
                event.stopPropagation();
                event.preventDefault();
            }
            render:function(){
                return (
                    <div>
                        <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>
                    </div>
                )
            }
        });

        var TestInputComponent=React.createClass({
            getInitialState:function(){
                return{
                    inputContent:''
                }
            }

            changeHandler:function(event){

                this.setState({
                    inputContent:event.target.value
                })
                event.stopPropagation();
                event.preventDefault();
            }
            render:function(){
                return (
                    <div>
                        <input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
                    </div>
                )
            }
        })

        React.render(<div>
            <TestClickComponent/>
            <br/>
            <TestInputComponent/>
        </div>,document.getElementById('container'));
    </script>
</body>
</html>

<!-- React.render()方法中的第一个参数只能有一个组件，所以可以看到是用div包裹起来的。 -->
<!-- this.refs.tip拿到的只是React Component,并不是真实的DOM结点,使用var tipE=React.findDOMNode(this.refs.tip)拿到真实的DOM结点 -->
<!-- event.stopPropagation();event.preventDefault()分别是事件阻止行为（阻止它被分派到其他 Document 节点）和默认行为 -->

（1）前端React入门学习--基础入门部分（快速了解）

猜你喜欢