<script type="text/babel">
    // 1.創(chuàng)建函數(shù)式組件  （首字母必須大寫）
    function MyComponent() { //（函數(shù)必須有返回值)
        console.log(this)  //undefined （本來(lái)this指向的是window，但是由于babel翻譯完之后啟用es5的嚴(yán)格模式，自定義的函數(shù)里的this不讓指向window）  
      return <h2>我是用函數(shù)定義的組件（適用于【簡(jiǎn)單組件】的定義）</h2>
    }
    // 2.渲染組件到頁(yè)面  (必須寫組件標(biāo)簽)
    ReactDOM.render(<MyComponent />, document.getElementById('test'))
  </script>

<script type="text/babel">
    // 1.創(chuàng)建類式組件
    class MyComponent extends React.Component {
      render() {
        // render是放在哪里的？——MyComponent的原型對(duì)象上,供實(shí)例使用
        // render中的this是誰(shuí)？——MyComponent的實(shí)例對(duì)象 <=> MyComponent組件實(shí)例對(duì)象
        console.log('render中的this是誰(shuí):', this)
        return <h2>我是用類定義的組件（適用于【復(fù)雜組件】的定義）</h2>
      }
    }
    // 渲染組件到頁(yè)面
    ReactDOM.render(<MyComponent />, document.getElementById('test'))

<script type="text/babel">
    // 1.創(chuàng)建組件
    class Weather extends React.Component {
      // 借助構(gòu)造器初始化狀態(tài)
      // 構(gòu)造器調(diào)用了幾次？————1次
      constructor(props) {
        console.log('constructor')
        super(props)
        // 初始化狀態(tài)   
        this.state = { isHot: true, wind: '微風(fēng)' }
        //解決changeWeather中this指向的問(wèn)題
        this.changeWeather = this.changeWeather.bind(this)
        // 這是一個(gè)賦值語(yǔ)句，右邊的this.changeWeather是指順著原型鏈找到了changeWeather()，然后調(diào)用bind()，bind可以生成一個(gè)新的函數(shù)，改變this指向。括號(hào)中為傳入的this，指得就是類中的實(shí)例對(duì)象 
        // 拿到了原型上的changeWeather，通過(guò)bind生成了一個(gè)新的changeWeather掛在實(shí)例自身
      }
      // render調(diào)用了幾次？————1+n次 1是初始化的那次，n是狀態(tài)更新的次數(shù)
      render() {
        console.log('render')
        // 讀取狀態(tài)
        const { isHot, wind } = this.state
        //        react：將changeWeather調(diào)用的返回值賦值給onClick,不用加括號(hào)  
        //        原生js：onclick時(shí)調(diào)用changeWeather函數(shù)，要加括號(hào)
        return <h1 onClick={this.changeWeather}>今天天氣很{isHot ? '炎熱' : '涼爽'},{wind}</h1>
        //    含義是：這是一個(gè)賦值語(yǔ)句，把右邊這個(gè)函數(shù)交給onClick作為回調(diào)，
        //            等你點(diǎn)擊的時(shí)候，react幫你調(diào)changeWeather()函數(shù)
      }

      // changeWeather調(diào)用了幾次？————點(diǎn)幾次調(diào)幾次
      changeWeather() {
        console.log('changeWeather')
        // changeWeather放在哪里？——Weather的原型對(duì)象上，供實(shí)例使用
        // 通過(guò)Weather實(shí)例調(diào)用changeWeather時(shí),changeWeather中的this就是Weather實(shí)例
        console.log(this)   //undefined
        // 因?yàn)閏hangeWeather不是通過(guò)實(shí)例調(diào)用的，是直接調(diào)用，所以this不會(huì)指向 實(shí)例對(duì)象
        // 那么 changeWeather 的this 是指向 undefined還是 window呢
        // 是 undefined 因?yàn)?類中的局部函數(shù)默認(rèn)開啟了嚴(yán)格模式（類自動(dòng)開的，與babel無(wú)關(guān)），所以不能指向 window

        // 獲取原來(lái)的isHot值
        const isHot = this.state.isHot
        // 嚴(yán)重注意：狀態(tài)（state）里的數(shù)據(jù)不能直接進(jìn)行更改，下面這行就是直接更改，react不認(rèn)可?。?！
        // this.state.isHot = !isHot  錯(cuò)誤寫法

        // 嚴(yán)重注意：狀態(tài)必須通過(guò)setState進(jìn)行修改，并且修改是一種合并，不是替換,只修改了isHot,wind不會(huì)丟失
        this.setState({ isHot: !isHot })
      }
    }
    // 2.渲染組件到頁(yè)面
    ReactDOM.render(<Weather />, document.getElementById('test'))

  </script>

<script type="text/babel">
    // 1.創(chuàng)建組件
    class Weather extends React.Component {
      // 初始化狀態(tài)時(shí)直接在類里面寫賦值語(yǔ)句
      state = { isHot: true, wind: '微風(fēng)' }
      render() {
        const { isHot, wind } = this.state
        return <h1 onClick={this.changeWeather}>今天天氣很{isHot ? '炎熱' : '涼爽'},{wind}</h1>
      }

      // 自定義方法 ————在用類去創(chuàng)建一個(gè)組件時(shí)，組件里所有自定義的方法都要用 賦值語(yǔ)句+箭頭函數(shù) 的形式
      changeWeather = () => {   //箭頭函數(shù)沒有this，箭頭函數(shù)內(nèi)的this指向其外側(cè)
        const isHot = this.state.isHot
        this.setState({ isHot: !isHot })
        console.log(this)
      }
    }
    ReactDOM.render(<Weather />, document.getElementById('test'))
  </script>

//實(shí)例對(duì)象身上有個(gè)屬性props，需要傳值進(jìn)去，那怎么傳呢？html標(biāo)簽?zāi)軐憳?biāo)簽屬性（key：value），那么組件標(biāo)簽（<Person/>）也能寫屬性
// 解構(gòu)賦值 提前從props身上拿到這三個(gè)屬性 
const { name, age, sex } = this.props

Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

//給Person加上propTypes屬性，react就能幫你限制了
//寫在Person類外面
Person.propTypes = {
  // 具體的propTypes規(guī)則，要去PropTypes（React里面內(nèi)置的一個(gè)屬性）里面找
  name: PropTypes.string.isRequired, //限制name必傳，且為字符串
  age: PropTypes.number //限制age為數(shù)值
}

// 用static表示給類自身加上一個(gè)propTypes和defaultProps屬性，而不是給類的實(shí)例對(duì)象加屬性
// 寫在Person類里面
static propTypes = {
   name: PropTypes.string.isRequired,  //限制name必傳，且為字符串
   sex: PropTypes.string, //限制sex為字符串
   age: PropTypes.number, //限制age為數(shù)值
 }

static defaultProps = {
   sex: '男',  //sex默認(rèn)值為不男不女
   age: 18  //age默認(rèn)值為18
 }

// 展開運(yùn)算符在對(duì)對(duì)象使用時(shí)，應(yīng)當(dāng)注意以{}包裹起來(lái)
<Person {...person}/>
//...展開運(yùn)算符具體運(yùn)用看vscode

Person.defaultProps = {
  age: 18, //age默認(rèn)值為18
  sex:'男'//sex默認(rèn)值為男
}

//開發(fā)中很少寫構(gòu)造器，能省則省
// 構(gòu)造器是否接收props，是否傳遞給super，取決于：是否希望在構(gòu)造器中通過(guò)this訪問(wèn)props
constructor(props){
  // 只要寫了構(gòu)造器，就一定要調(diào)用super(),一定要傳props
  super(props)
  console.log(props)//打印所有屬性
}

<script type="text/babel">
    // 創(chuàng)建組件
    //函數(shù)式組件能接收參數(shù)
    function Person(props) {
      // console.log(props)
      const { name, sex, age } = props
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性別：{sex}</li>
          <li>年齡：{age}</li>
        </ul>
      )
    }
    Person.propTypes = {
      name: PropTypes.string.isRequired,  //限制name必傳，且為字符串
      sex: PropTypes.string, //限制sex為字符串
      age: PropTypes.number, //限制age為數(shù)值
    }

    Person.defaultProps = {
      sex: '男',  //sex默認(rèn)值為不男不女
      age: 18  //age默認(rèn)值為18
    }
    ReactDOM.render(<Person name='旭旭' />, document.getElementById('test'))
  </script>

<script type="text/babel">
    // 創(chuàng)建組件
    class Demo extends React.Component {
      // 展示左側(cè)輸入框的數(shù)據(jù)
      showData = () => {
        const { input1 } = this.refs
        alert(input1.value)
      }
      // 展示右側(cè)輸入框的數(shù)據(jù)
      showData2 = () => {
        const { input2 } = this.refs
        alert(input2.value)
      }

      render() {
        return (
          <div>
            <input ref="input1" type="text" placeholder="點(diǎn)擊按鈕提示數(shù)據(jù)" /> &nbsp;
            <button onClick={this.showData}>點(diǎn)我提示左側(cè)的數(shù)據(jù)</button> &nbsp;
            <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦點(diǎn)提示數(shù)據(jù)" />
          </div>
        )
      }
    }
    //渲染組件
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>

<script type="text/babel">
    // 創(chuàng)建組件
    class Demo extends React.Component {
      // 展示左側(cè)輸入框的數(shù)據(jù)
      showData = () => {
        const { input1 } = this
        alert(input1.value)
      }
      // 展示右側(cè)輸入框的數(shù)據(jù)
      showData2 = () => {
        const { input2 } = this
        alert(input2.value)
      }

      // 回調(diào)函數(shù)的特點(diǎn)：你定義的，別人調(diào)的，最終執(zhí)行了
      // 回調(diào)函數(shù)的參數(shù)正是ref當(dāng)前所處的那個(gè)input節(jié)點(diǎn)
      render() {
        return (
          <div>
            {/* 代碼執(zhí)行步驟： */}
            {/* React加載Demo組件時(shí)，執(zhí)行render函數(shù)內(nèi)的jsx代碼，發(fā)現(xiàn)input中有ref屬性，屬性內(nèi)容是一個(gè)箭頭函數(shù)，React就會(huì)幫我們調(diào)用這個(gè)回調(diào)函數(shù)，并且把當(dāng)前的DOM傳進(jìn)這個(gè)函數(shù)，這樣就可以接收到當(dāng)前的DOM節(jié)點(diǎn)了,并把這個(gè)DOM放在組件實(shí)例自身上 */}
            {/* 箭頭函數(shù)接收到參數(shù)(當(dāng)前的DOM節(jié)點(diǎn))命名為（currentNode）,將currentNode賦值給實(shí)例對(duì)象下的input1這個(gè)屬性 */}
            {/* 箭頭函數(shù)只有一個(gè)參數(shù)可以省略'()',箭頭函數(shù)右邊只有一條函數(shù)體可以省略'{}' */}
            {/*<input ref={currentNode => this.input1 = currentNode} type="<text>" placeholder="點(diǎn)擊按鈕提示數(shù)據(jù)" />&nbsp;*/}
            <input ref={(currentNode) => { this.input1 = currentNode }} type="text" placeholder="點(diǎn)擊按鈕提示數(shù)據(jù)" /> &nbsp;
            <button onClick={this.showData}>點(diǎn)我提示左側(cè)的數(shù)據(jù)</button> &nbsp;
            <input ref={(currentNode) => { this.input2 = currentNode }} onBlur={this.showData2} type="text" placeholder="失去焦點(diǎn)提示數(shù)據(jù)" />
          </div>
        )
      }
    }
    //渲染組件
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>

<script type="text/babel">
    // 創(chuàng)建組件
    class Demo extends React.Component {

      state = { isHot: true }

      showInfo = () => {
        const { input1 } = this
        alert(input1.value)
      }

      changeWeather = () => {
        // 獲取原來(lái)的狀態(tài)
        const { isHot } = this.state
        // 更新狀態(tài)
        this.setState({ isHot: !isHot })
      }

      savaInput = (currentNode) => {
        this.input1 = currentNode;
      }

      render() {
        const { isHot } = this.state
        return (
          <div>
            <h1>今天天氣很{isHot ? '炎熱' : '涼爽'}</h1>
            {/* React在更新組件時(shí)，會(huì)先傳入null調(diào)用一次ref中的回調(diào)，以清空之前的ref；然后再傳入?yún)?shù)currentNode，以調(diào)用第二次。每更新一次組件，ref中的回調(diào)函數(shù)就會(huì)被調(diào)用兩次，一次傳入null，一次傳入?yún)?shù)currentNode。為了應(yīng)對(duì)這種情況的出現(xiàn)，官方建議將ref的回調(diào)函數(shù)定義成 class 的綁定函數(shù) 的方式去避免上述的問(wèn)題。 */}

            {/*內(nèi)聯(lián)函數(shù)*/}
            {/*<input ref={(currentNode) => { this.input1 = currentNode; console.log('@', currentNode) }} type="text" /><br /><br />*/}
            <input ref={this.savaInput} type="text" /><br /><br />
            <button onClick={this.showInfo}>點(diǎn)我提示輸入的數(shù)據(jù)</button>&nbsp;
            <button onClick={this.changeWeather}>點(diǎn)我切換天氣</button>
          </div>
        )
      }
    }
    //渲染組件
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>

<script type="text/babel">
    // 創(chuàng)建組件
    class Demo extends React.Component {
      myRef = React.createRef()
      myRef2 = React.createRef()
      /* React.createRef調(diào)用后可以返回一個(gè)容器，該容器可以存儲(chǔ)被ref所標(biāo)識(shí)的節(jié)點(diǎn),該容器是“專人專用”的，也就是，調(diào)用React.createRef()創(chuàng)建了一個(gè)容器，通過(guò)賦值語(yǔ)句賦值給實(shí)例自身名為myRef的屬性上 */
      // 展示左側(cè)輸入框的數(shù)據(jù)
      showData = () => {
        // console.log(this.myRef)
        alert(this.myRef.current.value)
      }
      // 展示右側(cè)輸入框的數(shù)據(jù)
      showData2 = () => {
        alert(this.myRef2.current.value)
      }

      // 回調(diào)函數(shù)的特點(diǎn)：你定義的，別人調(diào)的，最終執(zhí)行了
      // 回調(diào)函數(shù)的參數(shù)正是ref當(dāng)前所處的那個(gè)input節(jié)點(diǎn)
      render() {
        return (
          <div>
            {/* React執(zhí)行render函數(shù)中的jsx代碼時(shí)，
            發(fā)現(xiàn)input上有一個(gè)ref屬性而且是通過(guò)createRef方法創(chuàng)建的，
            React就會(huì)把當(dāng)前ref屬性所在的DOM節(jié)點(diǎn)放到之前創(chuàng)建的那個(gè)容器上，
            也就是把當(dāng)前input這個(gè)DOM節(jié)點(diǎn)放到了實(shí)例自身名為myRef的容器上 */}
            {/* 可以簡(jiǎn)寫成ref={this.myRef = React.createRef()} */}
            <input ref={this.myRef} type="text" placeholder="點(diǎn)擊按鈕提示數(shù)據(jù)" /> &nbsp;
            <button onClick={this.showData}>點(diǎn)我提示左側(cè)的數(shù)據(jù)</button> &nbsp;
            {/* 發(fā)生事件的元素正好是需要操作的元素本身，可以省略ref */}
            <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦點(diǎn)提示數(shù)據(jù)" /> &nbsp;
          </div>
        )
      }
    }
    //渲染組件
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>

<script type="text/babel">
    //  創(chuàng)建一個(gè)組件 
    class Demo extends React.Component {
      showInfo = () => {
        alert(this.myRef.current.value)
      }
      showData = (event) => {
        // 傳入的event是發(fā)生onBlur事件的事件源，也就是失去焦點(diǎn)提示數(shù)據(jù)的input框，
        // 通過(guò)event.target.value拿到input中的值
        alert(event.target.value)
      }
      render() {
        return (
          <div>
            <input ref={this.myRef = React.createRef()} type="text" placeholder="點(diǎn)擊按鈕提示數(shù)據(jù)" />&nbsp;
            <button onClick={this.showInfo}>點(diǎn)我提示左側(cè)數(shù)據(jù)</button>&nbsp;
            <input onBlur={this.showData} type="text" placeholder="失去焦點(diǎn)提示數(shù)據(jù)" />
          </div>
        )
      }
    }

    // 渲染組件到頁(yè)面
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>

<script type="text/babel">
    // 創(chuàng)建一個(gè)組件
    class Login extends React.Component {
      // handleSubmit函數(shù)中直接取出input中輸入的數(shù)據(jù)（現(xiàn)用現(xiàn)?。?
      handleSubmit = (event) => {
        event.preventDefault()     //阻止表單提交
        const { username, password } = this
        alert(`你輸入的用戶名是： ${username.value}, 你輸入的密碼是： ${password.value}`)
      }
      render() {
        return (
          // 對(duì)input（以及其他的一些輸入型DOM）中輸入的數(shù)據(jù)現(xiàn)用現(xiàn)取，就是非受控組件
          <form onSubmit={this.handleSubmit}>
            用戶名：<input ref={(c) => { this.username = c }} type="text" name="username" />
            密碼：<input ref={(c) => { this.password = c }} type="password" name="password" />
            {/* form中的button默認(rèn)提交，點(diǎn)擊后觸發(fā)表單提交事件onSubmit */}
            <button>登錄</button>
          </form>
        )
      }
    }
    // 渲染組件到頁(yè)面
    ReactDOM.render(<Login />, document.getElementById('test'))
  </script>

<script type="text/babel">
    // 創(chuàng)建一個(gè)組件
    class Login extends React.Component {
      // 初始化狀態(tài)
      state = { username: '', password: '' }

      // 保存用戶名到狀態(tài)中
      saveUsername = (event) => {
        this.setState({ username: event.target.value })
      }

      // 保存密碼到狀態(tài)中
      savePassword = (event) => {
        this.setState({ password: event.target.value })
      }

      // 表單提交的回調(diào)
      handleSubmit = (event) => {
        event.preventDefault()     //阻止表單提交
        const { username, password } = this.state
        alert(`你輸入的用戶名是： ${username}, 你輸入的密碼是： ${password}`)
      }

      /* 
      受控組件：（能夠省略ref）
      頁(yè)面中所有輸入類的DOM(input框)，隨著用戶的輸入，能把輸入的東西維護(hù)到狀態(tài)里(state),等需要用時(shí)，直接從狀態(tài)里面取出來(lái)

      數(shù)據(jù)被onChange函數(shù)監(jiān)聽，只要輸入型DOM數(shù)據(jù)一改變就觸發(fā)onChange中指定的回調(diào)函數(shù)
      回調(diào)函數(shù)saveUsername和savePassword中對(duì)改變的數(shù)據(jù)進(jìn)行保存，保存到state中，需要使用的時(shí)候才取出。
      */
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            用戶名：<input onChange={this.saveUsername} type="text" name="username" />
            密碼：<input onChange={this.savePassword} type="password" name="password" />
            <button>登錄</button>
          </form>
        )
      }
    }
    // 渲染組件到頁(yè)面
    ReactDOM.render(<Login />, document.getElementById('test'))
  </script>