类组件
<!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>