React基础巩固(四)
组件化
数据依赖
数据在哪里定义？
- 参与数据流（参与界面更新的数据：当数据变更时，需要更新组件渲染内容）定义在当前对象的state中。通过在构造函数中this.state = {定义数据}。当数据发生变化时，通过调用this.setState来更新数据，并且通知React进行update操作。在进行update操作时，会重新调用render函数，并且使用最新的数据来渲染界面。
- 不参与界面更新的数据：当数据变更时，不需要更新组件渲染内容。
事件绑定
事件绑定中的this指向谁？
- 默认情况下是 undefined
- 在正常DOM操作中，监听函数中的this其实是节点对象
- 由于React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，其本质是React的Element对象
- 故监听时，react在执行函数时并没有绑定this，默认情况下即为undefined
- 所以在传入函数时，需要绑定this
- 例如：修改文本
<!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></head><body><div id="root"></div><!-- 添加依赖 --><!-- 依赖三个包 --><!-- 1.CDN引入 --><scriptcrossoriginsrc="https://unpkg.com/react@18/umd/react.development.js"></script><scriptcrossoriginsrc="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script type="text/babel">// 使用组件进行重构代码// 1.类组件 2.函数式组件class App extends React.Component {// 组件数据constructor() {super();this.state = {message: "hello world",};//对需要绑定的方法，提前进行this绑定this.btnClick = this.btnClick.bind(this)}// 组件方法(实例方法)btnClick() {// setState内部完成：1.修改message的值 2.自动重新执行render函数this.setState({message: "hello react",});}// 渲染内容render() {return (<div><h2>{this.state.message}</h2><button onClick={this.btnClick.bind(this)}>修改文本</button><br/>在constructor中提前绑定this<button onClick={this.btnClick}>修改文本</button></div>);}}// this绑定的问题// const app = new App()// const foo = app.btnClick// foo(); // 默认绑定 => window => 严格模式下 => undefined// function bar(){// console.log("bar:", this);// }// bar();// 将组件渲染到界面上const root = ReactDOM.createRoot(document.querySelector("#root"));root.render(<App />);</script></body>
</html>
