<script type="text/babel">
        function MyComponent() {  
            return <h2>我是函數(shù)定義的組件(適用于簡(jiǎn)單組件的定義)</h2>
        }
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
    </script>

 1.React解析了組件標(biāo)簽，找到了對(duì)應(yīng)的組件
 2.發(fā)現(xiàn)這個(gè)組件是一個(gè)函數(shù)定義的，隨后調(diào)用該函數(shù)，生成一個(gè)虛擬dom
 3.最后將虛擬dom轉(zhuǎn)化成為真實(shí)dom，呈現(xiàn)在頁(yè)面中

<script type="text/babel">
        class MyComponent extends React.Component {
            render() {
                return <h2>我是類定義的組件適用于復(fù)雜數(shù)據(jù)類型</h2>
            }
        }
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
    </script>

1.React解析了組件標(biāo)簽，找到了對(duì)應(yīng)的組件
2.發(fā)現(xiàn)這個(gè)組件是一個(gè)類定義的，隨后new出來(lái)一個(gè)實(shí)例對(duì)象，并通過(guò)該實(shí)例調(diào)用原型上的render方法
3.將render()返回的內(nèi)容生成一個(gè)虛擬dom
4.最后將虛擬dom轉(zhuǎn)化成為真實(shí)dom，呈現(xiàn)在頁(yè)面中

組件名必須首字母大寫(xiě)
虛擬DOM元素只能有一個(gè)根元素
虛擬DOM元素必須有結(jié)束標(biāo)簽

<script type="text/babel">
        class Weather extends React.Component {
            constructor() {
                super()
                this.state = {
                    isHot: false,
                    wind: '微風(fēng)'
                }
                this.chang = this.chang.bind(this)
            }
            render() {
                let { isHot, wind } = this.state
                return <h2 onClick={this.chang}>今天的天氣很 {isHot ? "炎熱" : "涼爽"},{wind}</h2>
            }hang() {
                console.log(this)
                this.setState({
                    isHot: !this.state.isHot
                })
            }
        }
        ReactDOM.render(<Weather />, document.getElementById('test'))
    </script>

1.組件中render方法中的this為組件實(shí)例對(duì)象
2.組件自定義的方法中this為undefined，如何解決？
	1.強(qiáng)制綁定this: 通過(guò)函數(shù)對(duì)象的bind()
	2.箭頭函數(shù)
3.狀態(tài)數(shù)據(jù)，不能直接修改或更

<script type="text/babel">
        class Weather extends React.Component {
           state = {
                    isHot: false,
                    wind: '微風(fēng)'
                }

            render() {
                let { isHot, wind } = this.state
                return <h2 onClick={this.chang}>今天的天氣很 {isHot ? "炎熱" : "涼爽"},{wind}</h2>
            }

            chang = ()=>{  
                this.setState({
                    isHot: !this.state.isHot//這里的修改是一種合并，對(duì)比屬性的變化，如果有賦新值，沒(méi)有則跳過(guò)
                })
            }
        }
        ReactDOM.render(<Weather />, document.getElementById('test'))
        let a = new Weather()
</script>

<script type="text/babel">
  class MyComponent extends React.Component {
    render() {
      return (
        <ul>
          <li>{this.props.name}</li>
          <li>{this.props.age}</li>
        </ul>
      );
    }
  }
  ReactDOM.render(
    <MyComponent name="Bob" age="18" />,
    document.getElementById("test")
  );
</script>

class MyComponent extends React.Component {
  render() {
    return (
      <ul>
        <li>{this.props.name}</li>
        <li>{this.props.age}</li>
      </ul>
    );
  }
}

// 校驗(yàn)類型
MyComponent.propTypes = {
  name: PropTypes.string, // 這里的 PropTypes 變量是全局掛載的
  age: PropTypes.number,
};

ReactDOM.render(
  <MyComponent name="Bob" age={18} />,
  document.getElementById("test")
);

<script type="text/babel">
        class Weather extends React.Component {
            constructor(props) {//是否接受，取決于是否使用外部數(shù)據(jù)
                super(props)//只能上面接受了props，super()就去傳遞，否則后續(xù)的使用，可能就會(huì)出現(xiàn)問(wèn)題
            }
            static propTypes = {
                name: PropTypes.string.isRequired,//限制name為字符串類型，必填
                // age: PropTypes.number,
                sex: PropTypes.string,
                speak: PropTypes.func
            }
            static defaultProps = {
                sex: '男',
            }
            render() {
                let { name, age, sex } = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性別：{sex}</li>
                        <li>年齡：{age + 1}</li>
                    </ul>
                )
            }
        }
     ReactDOM.render(<Weather name="tom" age={26} sex="女" />, document.getElementById('test'))

</script>

<script type="text/babel">
  // 函數(shù)組件
  function MyComponent(props) {
    return (
      <ul>
        <li>{props.name}</li>
        <li>{props.age}</li>
      </ul>
    );
  }
  // 校驗(yàn)類型
  MyComponent.propTypes = {
    name: PropTypes.string,
      age: PropTypes.number,
  };

  ReactDOM.render(
    <MyComponent name="Bob" age={18} />,document.getElementById("test")
  );
</script>

<script type="text/babel">
  class MyComponent extends React.Component {
    
    handleAlert = () => {
      // 直接從組件實(shí)例上獲取 myInput
      console.log(this.myInput); // <input type="text">
      alert(this.myInput.value);
    };

    render() {
      return (
        <div>
          {/* ref 直接定義成一個(gè)回調(diào)函數(shù)，參數(shù)就是節(jié)點(diǎn)本身，將它賦值給組件的一個(gè) myInput 屬性 */}
          <input ref={(ele) => (this.myInput = ele)} type="text" />
          <button onClick={this.handleAlert}>alert</button>
        </div>
      );
    }
  }

  ReactDOM.render(<MyComponent />, document.getElementById("test"));
</script>

<script type="text/babel">
  class MyComponent extends React.Component {
    // 創(chuàng)建 ref
    myInput = React.createRef();

    handleAlert = () => {
      console.log(this.myInput.current); // 這里需要注意，元素是在 current 屬性上
      alert(this.myInput.current.value);
    };

    render() {
      return (
        <div>
          {/* 將創(chuàng)建好的 ref 附加到元素上 */}
          <input ref={this.myInput} type="text" />
          <button onClick={this.handleAlert}>alert</button>
        </div>
      );
    }
  }

  ReactDOM.render(<MyComponent />, document.getElementById("test"));
</script>