React全家桶day02

最新推荐文章于 2024-05-23 17:56:57 发布

陈凯哥哥。。

最新推荐文章于 2024-05-23 17:56:57 发布

阅读量84

点赞数

分类专栏：笔记文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_55411822/article/details/121080755

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

类组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello_React</title>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-Dom，用于支持React操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入Babel，用于将JSX转为JS -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class MyComponent extends React.Component{ 
                     render(){
                    return <h1>今天很炎热</h1>
                } 
            }
	ReactDOM.render(
	<MyComponent s/>,document.getElementById('test'))
	</script>
</body>

</html>

注意事项：
1、React解析组件标签，找到了MyComponent组件
2、发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的Render方法。
3、将返回的虚拟DOM转为正式的DOM，随后呈现在页面。

组件实例的三大核心属性1、State‘

1、state是组件对象最终太的属性，值是对象的（可以包含多个）
2、组件被称为"状态机"，通过更新组件的state来更新对用的页面显示（重新选热按组件）

建议

1)、组件中render方法中的this为组件实例对象。
2)、组件自定义的方法中this 为undefined，如何解决？
a、强制绑定this:通过函数对象BInd()
b、箭头函数
3)、状态数据，不能直接修改或更新。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello_React</title>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-Dom，用于支持React操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入Babel，用于将JSX转为JS -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class MyComponent extends React.Component{
              constructor(props){
                        super(props)
                        this.state={isHot:false}
                    }  
                     render(){
                    console.log(this)
                    return <h1>今天很{this.state.isHot?'炎热': '凉爽'}</h1>
                } 
            }
	ReactDOM.render(
	<MyComponent s/>,document.getElementById('test'))
	</script>
</body>

</html>

陈凯哥哥。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React全家桶day02

类组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello_React</title></head><body>  <div id="test"></div> <!-- 引入React核心库 --&
复制链接

扫一扫