案例： 点击标签切换内容（标准写法）
点击后：
<!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>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/6.26.0/babel.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
// 创建组件
class HelloMessage extends React.Component { //构造器指挥调用一次
constructor(props) {
super(props) // spuer 必须让在this操作的前面
this.state = { cont: true, day: false}
this.myFn = this.myFn.bind(this) // bind 可以生成新的函数也可以 帮你改函数里面的this指向构造器
console.log(this)
}
render() { // render 会调用1+n次 1是初始化的一次 n是状态跟新的次数
const {cont, day} = this.state;
return (
<div>
Hello {this.props.name}
this是HelloMessage组件的实例对象
<p onClick={this.myFn}>利用state点击改变数据（{this.state.cont ? 'hello' : 'hi'}), 今天是第{day?'1天':'2天'}</p> 等号是赋值 myFn 是对象指向 myFn（）是执行函数 所以 写()的话打开页面会直接执行函数
</div>
);
}
myFn() { // myFn 会调用次数 == 点击的次数
/* this.state.cont = !this.state.cont // 此时的cont 确实更改了 但是页面并没有发生改变 react不认可 错误写法
let cont = this.state.cont
console.log(cont);*/
// 状态(state) 不可以直接更改,要借助一个内置的API更改
let cont = this.state.cont
let day = this.state.day
// 状态必须通过setState进行跟新
this.setState({cont:!cont, day:!day})
console.log(cont);
console.log(day);
}
}
ReactDOM.render(<HelloMessage name="Taylor" />, document.getElementById('app'))
//bind:创建新的函数
// function demo() {
// console.log(this);
// }
// deomo()
// const x = demo.bind({a:1, b:2})
// x()// 此时的bind 创建了新的函数 不赋值x 是不会执行
</script>
</body>
react类式组件执行步骤：
- 执行 ReactDOM.render( <HelloMessage na…之后React解析组件标签，找到HelloMessage组件，
- 发现组件是使用类定义的，随后new出来该类的实例，并通过实例调用到原型上render方法
- 将render返回的虚拟dom转换为真实的dom然后呈现到页面种
类式组件的执行次数：
- 先执行 coustructor 一次 在执行函数 最后执行render 跟新页面
- render 会调用1+n次 1是初始化的一次 n是状态跟新的次数
- myFn 会调用次数 == 点击的次数
等号是赋值，myFn 是对象指向 ，myFn（）是执行函数 如果直接写onClick = {myFn() }的话打开页面会直接执行函数
简写以上案例：
<body>
<div id="app">
</div>
<script type="text/babel">
// 创建组件
class HelloMessage extends React.Component {
// 初始化状态
state = {
cont:true, day:true}
render() {
const {
cont, day} = this.state;
return (
<div>
<h1 onClick={
this.myFn}>利用state点击改变数据（{
cont ? 'hello' : 'hi'}), 今天是第{
day?'1天':'2天'}</h1>
</div>
);
}
// 自定义方法 要用赋值语句写+箭头函数
myFn = ()=> {
let cont = this.state.cont
let day = this.state.day
this.setState({
cont:!cont, day: !day})
}
}
ReactDOM.render(<HelloMessage name="Taylor" />, document.getElementById('app'))
</script>
</body>
</html>