一、函数式组件(简单式)

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>函数式组件</title>
  6. </head>
  7. <body>
  8. <div id="test"></div>
  10. <script src="../js/react.development.js"></script>
  11. <script src="../js/react-dom.development.js"></script>
  12. <script src="../js/babel.min.js"></script>
  14. <script type="text/babel">
  15.     //1.创建函数式组件
  16.     function Test(){
  17.         console.log(this);// 此处的this是undefined，因为babel编译后开启了严格模式
  18.         return <h2>函数式组件的创建</h2>
  19.     }
  21.     //2.渲染组件到页面
  22.     ReactDOM.render(<Test/>,document.getElementById('test'))
  25. /*
  26.     执行ReactDOM.render(<Test/>,document.getElementById('test'))后：
  27.         1.React解析组件标签，找到了Test组件.
  28.         2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中.
  29.         3.
  30. */
  31. </script>
  32. </body>
  33. </html>

二、类式组件(复杂式)

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Test</title>
  6. </head>
  7. <body>
  8. <div id="test"></div>
  10. <script src="js/react.development.js"></script>
  11. <script src="js/react-dom.development.js"></script>
  12. <script src="js/babel.min.js"></script>
  14. <script type="text/babel">
  16.     //1.创建类式组件
  17.     class MyComponent extends React.Component{
  18.         render(){
  19.             return <h2>类式组件的创建</h2>
  20.         }
  21.     }
  23.     //2.渲染组件
  24.     ReactDOM.render(<MyComponent/>,document.getElementById('test'))
  27. /*
  28.     执行ReactDOM.render(<MyComponent/>,document.getElementById('test'))后：
  29.         1.React解析组件标签，找到了MyComponent组件.
  30.         2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法.
  31.         3.将返回的虚拟DOM转为真实DOM，随后呈现在页面中.
  32.         4.render中的this----->MyComponent的实例对象
  33. */
  34. </script>
  35. </body>
  36. </html>

三、函数组件与类式组件的区别

1.简单式组件无状态(state)，复杂式组件有状态(state)
2.对状态的理解：
2.1 state是组件对象的属性之一，值是对象(可以包含对个key-value组合)
2.2 更新组件状态，达到更新对应的页面显示(重新渲染组件)
3.注意：
3.1 组件中render方法中的this为组件实例对象
3.2 组件自定义的方法中this为undefined的解决办法
3.2.1 强制绑定this，通过函数的bind
3.2.2 箭头函数
3.3 状态数据不能直接修改或更新

四、初始化状态(state)&事件绑定

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Test</title>
  6. </head>
  7. <body>
  8. <div id="test"></div>
  10. <script src="js/react.development.js"></script>
  11. <script src="js/react-dom.development.js"></script>
  12. <script src="js/babel.min.js"></script>
  14. <script type="text/babel">
  16.     //1.创建类式组件
  17.     class Weather extends React.Component {
  18.         constructor(props) {
  19.             super(props);
  20.             this.state = {isHot: false}
  21.             this.changeWeather = this.changeWeather.bind(this)
  22.         }
  24.         render() {
  25.             const {isHot} = this.state
  26.             return (
  27.                 <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
  28.             );
  29.         }
  31.         changeWeather() {
  32.             const isHot = this.state.isHot
  33.             // this.state.isHot = !isHot
  34.             this.setState({isHot: !isHot})
  35.         }
  36.     }
  38.     //2.渲染组件
  39.     ReactDOM.render(<Weather/>, document.getElementById('test'))
  42. </script>
  43. </body>
  44. </html>