react学习---day01--带方法的组件(计算加减)

1.开头都是一样的引入react,react-dom以及babel和固定的一些语法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>计算加减</title>
 7     <!-- 该文件向外暴露（导出）了一个对象 React -->
 8     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 9 
10     <!-- 该文件向外暴露了一个对象 React-Dom -->
11     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
12     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
13 </head>
14 <body>
15     <div id="app"></div>
16 </body>
17 </html>

2.开始往script标签里面填充

 1 <script type="text/babel">
 2     class App extends React.Component{
 3         constructor() {
 4             super()
 5             this.state = {
 6                 num: 0
 7             }
 8         }
 9 
10         add() {
11             // 调用react的方法setSdate来修改state的值
12             this.setState({
13                 num: this.state.num +1
14             })
15         }
16 
17         cut() {
18             this.setState({
19                 num: this.state.num -1
20             })
21         }
22 
23         render() {
24             // add的this: 默认this是undefined;
25             // react底层使用的是call()方法来拷贝的,所以需要执行react方法的话需要加上bind(this)将this绑定
26             return (
27                 <div>
28                     <button onClick={ this.cut.bind(this) }>-</button>
29                     <span>{ this.state.num }</span>
30                     <button onClick={ this.add.bind(this) }>+</button>
31                 </div>
32             )
33         }
34     }
35 
36     ReactDOM.render(<App />, document.getElementById('app'))
37 </script>

需要注意的地方: 

  1. 利用继承式组件时,定义的方法需要卸载构造函数外面的
  2. class里面的this其实就是react本身
  3. 修改state里面的数据的时候需要调用react的setState()方法
  4. setState接收一个对象,需要改变的变量为键,改变的方法为值
  5. 在React中,组件的方法中的this默认是undefined,因为底层使用的拷贝方式是call(),所以在执行方法的时候为了将this指向react必须加上bind()方法
posted @ 2021-01-08 17:34  微笑着的代码狗  阅读(386)  评论(0)    收藏  举报