react函数式组件用法-CFANZ编程社区

react函数式组件用法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
    <div id="test">
    </div>
    
    <div id = "div">
    </div>

</body>
<script src="../React-js/react.development.js" type="text/javascript"></script>
<script src="../React-js/react-dom.development.js" type="text/javascript"></script>
<script src="../React-js/babel.min.js" type="text/javascript"></script>
<script type="text/babel">
        // 1.创建函数式组件 
        function Demo(){
            console.log(this); //这个this是undefined,因为babel编译之后开启了严格模式
            return <h2>哈哈哈</h2>
        }
        //函数式组件还可以添加参数
        function Show(props){
            return <h1>Hello {props.age}</h1>
        }
        //2.渲染组件
        ReactDOM.render(<Demo />,document.getElementById("test"));
        ReactDOM.render(<Show age="ss" />,document.getElementById("div"));
        //注意事项：
        /*
        1.组件的首字母必须是大写，并且有返回值
        2.在渲染的时候必须<组件名 />
        */

       //执行过程：
       //1.React解析组件标签，找到相应的组件。
       //2.发现组件是函数定义的，随后调用函数，将返回的虚拟DOM转化为真实DOM,随后呈现在页面中。

        //在类中，一般方法是放在原型对象上的，供实例使用
        //方法中的this主要取·决于是谁调用了他
</script>
</html>
0 条评论