reactjs学习笔记2--组件的介绍_React

上一篇: React Native填坑之旅--Diff算法... 下一篇:react-router v4 使用 history 控...

reactjs学习笔记2--组件的介绍

发布时间：2019-06-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了reactjs学习笔记2--组件的介绍，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

什么是组件
组件就像是乐高积木，一个完整的房子，可以由砖头一块一块的组成，一块砖头，就可以称为一个组件。

@H_126_12@如何创建组件
调用 React.createClass 方法，传入的参数为一个对象，对象必须定义一个 render 方法，render 方法返回值为组件的渲染结构，也可以理解为一个组件实例（React.createElement 工厂方法的返回值），返回值有且只能为一个组件实例，或者返回null/false，当返回值为 null/false 的时候，React 内部通过 <noscript/> 标签替换。

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="VAR MessageBox = React.createClass({
    render: function () {
        return (
            
                 hello react 
            
        );
    }
});
" tITle="" data-original-title="复制">
      
      
var MessageBox = React.createClass({
    render: function () {
        return (
            <div>
                <h1> hello react </h1>
            </div>
        );
    }
});

如何渲染组件
例子中通过调用 React.render 方法（例子基于0.13版本 新版中使用 ReactDOM.render 方法）， 第一个参数为 组件名称，第二个为定义的 DOM 元素，第三个参数可以为空。

      
      
      LOG('渲染完成');
    }
);" title="" data-original-title="复制">
      
      
var MessageBox = React.createClass({
    render: function () {
        return (
            <div>
                <h1> hello react </h1>
            </div>
        );
    }
});

React.render(<;messageBox />,
    document.getElementById('app'),
    function () {
        console.log('渲染完成');
    }
);
组件的使用实例
1、组件的组合使用
组件化的思想 就是让组件可以实现复用，一个大的应用通过多个小组件组合而成。下面的例子中展示了 react 组件是如何组合工作的。

      
      
      ubMessage = React.createClass({
    render: function () {
        return (
            
                 IDEA是高效的代码编辑器 
                
            
        )
    }
});

var Footer = React.createClass({
    render: function () {
        return (这是脚部文件)
    }
})

React.render(,
        document.getElementById('app'),
        function () {
            console.log('渲染完成');
        }
);" title="" data-original-title="复制">
      
      
var MessageBox = React.createClass({
    render: function () {
        return (
            <div>
                <h2> 你好， react！！！ </h2>
                <SubMessage />
            </div>
        );
    }
});

var SubMessage = React.createClass({
    render: function () {
        return (
            <div>
                <h1> IDEA是高效的代码编辑器 </h1>
                <Footer />
            </div>
        )
    }
});

var Footer = React.createClass({
    render: function () {
        return (<h2>这是脚部文件</h2>)
    }
})

React.render(<MessageBox />,
        document.getElementById('app'),
        function () {
            console.log('渲染完成');
        }
);
执行上述代码可以得到

2、循环使用一个组件

      
      
      i++){
                submessages.push(
                    
                )
            }
            return (
                
                     hello react 
                    {submessages}
                
            );
        }
    });
    
    var SubMessage = React.createClass({
        render: function () {
            return (
                
                     高效的代码编辑器 
                
            )
        }
    });
    
    React.render(,
            document.getElementById('app'),
            function () {
                console.log('渲染完成');
            }
    );
" title="" data-original-title="复制">
      
      

    var MessageBox = React.createClass({
        render: function () {
            var submessages = [];
            for(var i=0;i<10;i++){
                submessages.push(
                    <SubMessage key={'s'+i}/>
                )
            }
            return (
                <div>
                    <h1> hello react </h1>
                    {submessages}
                </div>
            );
        }
    });
    
    var SubMessage = React.createClass({
        render: function () {
            return (
                <div>
                    <h1> 高效的代码编辑器 </h1>
                </div>
            )
        }
    });
    
    React.render(<MessageBox />,
            document.getElementById('app'),
            function () {
                console.log('渲染完成');
            }
    );

可以得到的结果如下图