React学习学习笔记

最新推荐文章于 2023-09-09 15:33:40 发布

KarelRuby

最新推荐文章于 2023-09-09 15:33:40 发布

阅读量165

点赞数

分类专栏： ReactNative 文章标签： React

本文链接：https://blog.csdn.net/xiguanbuxing/article/details/51190727

版权

ReactNative 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello World!</title>
    <!-- 装载react -->
    <script src="./react-0.14.8/build/react.js"></script>
    <script src="./react-0.14.8/build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>

<body>
    <div id="example">
    </div>
    <!--组件类的propTypes属性，就是用来验证组件实例的属性是否合法？-->
    <script type="text/babel">
        //自定义一个名称为HelloWorld的组件，注意组件名称必须以大写字母开头
        var HelloWorld = React.createClass({
            //验证该组件的name、sex属性是否合法
            propTypes:{
                name:React.PropTypes.string.isRequired,
                sex:React.PropTypes.string.isRequired
            },
            //创建类的时候调用，可用来设置组件的默认值
            getDefaultProps:function(){
                return {
                    name:"小强",
                    sex:"男"
                };
                console.log("创建类的时候调用getDefaultProps");
            },
            //定义了变量的初始状态，也就是一个对象，这个对象可以通过this.state属性读取
            getInitialState:function(){
                return {
                    liked:false
                };
                console.log("获取this.state的默认值getInitialState");
            },
            handleClick:function(event){
                this.setState({liked:!this.state.liked});
                console.log("你执行了点击方法");
            },
            render: function(){
                var text = this.state.liked?"liked":"do not liked";
                console.log("render渲染并返回一个虚拟DOM");
                return (
                    <p onClick={this.handleClick}>Hello {this.props.name}{this.props.sex}{text}</p>
                );
            },
            componentDidMount:function(){
                console.log("render之后调用，会使返回的虚拟DOM来创建真实DOMcomponentDidMount");
            },
            
            componentWillUnmount:function(){
                console.log("componentWillUnmount");
            },

        });
        ReactDOM.render(<HelloWorld name="" sex=""></HelloWorld>,document.getElementById("example"));
    </script>
</body>
</html>

KarelRuby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习学习笔记

通过代码示例学习react //自定义一个名称为HelloWorld的组件，注意组件名称必须以大写字母开头 var HelloWorld = React.createClass({ //验证该组件的name、sex属性是否合法
复制链接

扫一扫