一、react中的state
1.state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)
2.组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)
注意:
(1)组件中的render方法中的this为组件实例对象
(2)组件自定义的方法中this为undefined,如何解决?
a.强制绑定this:通过函数对象的bind()
b.箭头函数
(3) 状态数据,不能直接修改或更新。
函数式组件:this为undefined
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="/react-development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="/react-dom-development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="/babel.min.js"></script>
<script type="text/babel">
// 1.创建函数式组件
function Demo() {
console.log(this);//undefined
return <h2>我是用函数定义的组件</h2>
}
// 2.渲染组件到页面
ReactDOM.render(<Demo />, document.getElementById('test'))
/**
* 执行了ReactDOM.render(<MyComponent/>.....)之后,发生了什么?
* 1.React解析组件标签,找到MyComponent组件。
* 2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。
*
*/
</script>
</body>
</html>
类式组件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="/react-development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="/react-dom-development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="/babel.min.js"></script>
<script type="text/babel">
// 1.创建类式组件
class MyComponent extends React.Component {
render() {
console.log(this);
// render是放在哪里的?MyComponent的原型对象上,供实例使用。
// render()中的this指向的是MyComponent组件实例对象
return <h2>我是用函数定义的组件</h2>
}
}
// 2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/**
* 执行了ReactDOM.render(<MyComponent/>.....)之后,发生了什么?
* 1.React解析组件标签,找到MyComponent组件。
* 2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用原型链上的render方法
* 3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
*/
</script>
</body>
</html>
类式组件的this