【React】第二部分 面向组件编程
2. 面向组件编程
2.1 下载React开发者工具
2.2 函数式组件
需要注意:
-
组件名必须首字母大写
-
虚拟DOM元素只能有一个根元素
-
虚拟DOM元素必须有结束标签
-
ReactDOM.render()渲染函数式组件,第一个参数是标签必须是首字母大写并且自闭合 -
函数式中的this为undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数式组件</title>
</head>
<body>
<div class="box"></div>
<!-- 下面需要按顺序进行引入 -->
<!-- 引入React核心库 -->
<script src="./react.development.js" type="text/javascript"></script>
<!-- 引入react-dom, 用来支持react去操作dom -->
<script src="./react-dom.development.js" type="text/javascript"></script>
<!-- 引入babel, 用来将jsx转化为js -->
<script src="./babel.min.js" type="text/javascript"></script>
<!-- 这里需要注意将type写成 text/babel-->
<script type="text/babel" >
// 创建一个函数式组件
// 之前jsx规则说过,标签以大写字母开头react就会去渲染对应的组件
function Demo(){
// 此处的this为undefined,因为这里使用babel进行翻译,模式为严格模式
// 在严格模式下,禁止自定义函数中的this指向window
console.log(this);
return <h1>我是函数式组件(适用于简单组件)</h1>
}
// 渲染函数式组件
// 在这里需要写标签,标签必须是首字母大写并且自闭合
ReactDOM.render(<Demo/>,document.querySelector('.box'))
// 执行上述代码,React解析组件标签,找到对应的组件,发现是一个函数定义
// 随后调用函数将返回的虚拟DOM转为真实DOM,渲染到页面上
</script>
</body>
</html>
2.3 类式组件
需要注意:
-
创建一个类式组件必须要继承
React.Component这个类 -
必须要有render函数,并且需要有返回值
-
组件名必须首字母大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类式组件</title>
</head>
<body>
<div class="box"></div>
<!-- 下面需要按顺序进行引入 -->
<!-- 引入React核心库 -->
<script src="./react.development.js" type="text/javascript"></script>
<!-- 引入react-dom, 用来支持react去操作dom -->
<script src="./react-dom.development.js" type="text/javascript"></script>
<!-- 引入babel, 用来将jsx转化为js -->
<script src="./babel.min.js" type="text/javascript"></script>
<!-- 这里需要注意将type写成 text/babel-->
<script type="text/babel" >
// 创建一个类式组件
class Demo extends React.Component{
render(){
// 此处的this指向的是该类的实例对象
console.log(this);
return (
<h1>我是类式组件(适用于复杂组件)</h1>
)
}
}
ReactDOM.render(<Demo/>,document.querySelector('.box'))
/*
执行上述代码,React解析组件标签,找到对应的组件,发现是一个类定义
随后new一个该类的实例,并且通过该类去调用原型对象上的render函数,
将虚拟DOM转为真实DOM渲染到页面上
*/
</script>
</body>
</html>
总结
以上就是今天要讲的内容，希望对大家有所帮助！！！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
