05 组件三大属性----state

需求：自定义组件，功能说明如下

1，显示h2标题，初始文本为：你喜欢我

2，点击标题更新为：我喜欢你

第一步：初始化状态值并渲染组件标签

　　组件只有两种状态，“我喜欢你”和“你喜欢我”，因此只需要定义一个布尔变量，通过更新布尔变量的值，控制两种情况的渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
</body>
</html>
<script type="text/babel">

   class LikeComponent extends React.Component{
       //初始化状态
       constructor(props){
         super(props)
         this.state={
             islike:false,
         }
       }
        render(){
　　　　　　　const {islike} = this.state;
            return <h2>{islike?'我喜欢你':'你喜欢我'}</h2> //读取某个状态值
        }
   }
   ReactDOM.render(<LikeComponent/>,document.getElementById("test"));
</script>

第二步，做交互，通过点击文本 ----> 改变布尔值 -----> 来更新状态

 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>Document</title>
 7     <script src="../js/react.development.js"></script>
 8     <script src="../js/react-dom.development.js"></script>
 9     <script src="../js/babel.min.js"></script>
10 </head>
11 <body>
12     <div id="test"></div>
13 </body>
14 </html>
15 <script type="text/babel">
16   
17    class LikeComponent extends React.Component{
18        //初始化状态
19        constructor(props){
20          super(props)
21          this.state={
22              islike:false,
23          }
24          
25          this.stateChange=this.stateChange.bind(this); //将新增方法中的this强制绑定为组件对象
26        }
27        stateChange(){
28          console.log(this);//LikeComponent
29          const islike=!this.state.islike; //得到状态并取反,不能这样写const {islike}=!this.state;
30          this.setState({islike});//更新状态
31        }
32         render(){
33             const {islike}=this.state;//读状态
34             return <h2 onClick={this.stateChange}>{islike?'我喜欢你':'你喜欢我'}</h2>
35         }
36    }
37    ReactDOM.render(<LikeComponent/>,document.getElementById("test"));
38 </script>