// 函數(shù)式組件
// 寫(xiě)組件模板的時(shí)候必須遵循jsx語(yǔ)法
function App() {
  return (
    <div className="App">
      hello reactjs
    </div>
  );
}

// class組件
// 注意：組件名必須首字母大寫(xiě)(為了和普通標(biāo)識(shí)符區(qū)分開(kāi))，必須繼承自 React.Component 組件
// class的好處就是可以在render并列的位置
// class組件中，使用的this是當(dāng)前組件實(shí)例
// App這個(gè)組件必須繼承自React.Component
class App extends React.Component {
  // App這個(gè)組件要想渲染什么由內(nèi)部的render方法決定，必須要有render方法，這個(gè)render方法負(fù)責(zé)渲染組件的模板就是有什么標(biāo)簽
  // js中如果return后面沒(méi)有語(yǔ)句就會(huì)自動(dòng)加分號(hào)
  // 當(dāng)想要使用插件時(shí)得改變 組件文件名的后綴改為jsx
  // 定義組件狀態(tài)state，組件數(shù)據(jù)
  // 在constructor函數(shù)中對(duì)組件狀態(tài)進(jìn)行初始化
  constructor(props) {
    super(props)
    this.state = {//初始化組件狀態(tài)
      count: 100,
      arr: ['nodejs', 'react', 'vue.js']
    }
  }
  // state = 100
  // state = {
  //   count: 100,
  //   arr: ['nodejs', 'react', 'vue.js']
  // }
  render() {//render中必須return返回 組件模板
    return (
      <div className="App">
        <h1>{this.state.count}</h1>
        <h1>{this.state.arr}</h1>
      </div>
    );
  }
}

function Header ( props ){
 return (
 <div className="header">
 {/* 組件模板中使用 組件的屬性 */}
 <h1>{props.id},{props.url}</h1>
 </div>
 )
}

class Header extends React.Component{
render(){
 return (
 <div className="header">
 {/* 組件模板中使用 組件的屬性 */}
 <h1>{this.props.id},{this.props.url}</h1>
</div>
 )
 }
}

import React, { Component } from 'react';
class Child extends Component {
    handleClick() {
        // this.props.title = 'state'; //props是只讀的.
    }
    render() {
        return (
            <div className="child">
                {this.props.title}{this.props.count}
                <button onClick={() => { this.handleClick() }}>更改</button>
            </div>
        );
    }
}
export default Child;

<Child title="今天學(xué)習(xí)props" count={100} />

import './App.css';
import Child from './Child';
//react中存在兩種形式的組件: 函數(shù)式組件, 類組件
//使用 rcc 快速創(chuàng)建 類組件  ( 主要使用這個(gè) )
//使用 rsf 快速創(chuàng)建 函數(shù)式組件
import React, { Component } from 'react';
class App extends Component {
  // 掛載期(掛載期的方法會(huì)自動(dòng)執(zhí)行，而且只執(zhí)行一次)
  constructor(props) {//這個(gè)函數(shù)會(huì)在組件掛載前就執(zhí)行，組件并沒(méi)有顯示在頁(yè)面上
    super(props);
    console.log('constructor');
    this.state = {}//初始化組件狀態(tài)
  }
  componentWillMount() {//掛載前
    console.log('componentWillMount 將要掛載');
  }
  componentDidMount() {//掛載完成，組件就會(huì)顯示在頁(yè)面上
    console.log('componentDidMount 掛載完成');
    // 在這里發(fā)送網(wǎng)絡(luò)請(qǐng)求，創(chuàng)建定時(shí)器，事件監(jiān)聽(tīng)，理由是：這個(gè)方法只執(zhí)行一次，而且會(huì)自動(dòng)執(zhí)行
    // 這里的this指的是組件實(shí)例this.timerid就是將定時(shí)器保存在當(dāng)前組件實(shí)例身上，就可以在各個(gè)組件生命周期共享
    // 還可以直接保存在組件狀態(tài)中，只不過(guò)保存在組件狀態(tài)中定時(shí)器是可以改變的，如果不變化就可以保存在組件實(shí)例身上
    this.timerid = setInterval(() => {
      console.log('定時(shí)器在執(zhí)行');
    }, 1000)
  }
  // 更新期(更新期的方法可能會(huì)反復(fù)調(diào)用執(zhí)行)
  // 性能優(yōu)化時(shí)寫(xiě)的地方
  shouldComponentUpdate(nextProps, nextState) {//控制組件是否更新，目的是提示組件性能(性能優(yōu)化)
    // 組件性能優(yōu)化：把有效的更新進(jìn)行更新，無(wú)效的更新就不讓它進(jìn)行更新
    // 組件狀態(tài)是否有變化，如果有變化就更新，沒(méi)有變化就不更新
    // 當(dāng)setState中的數(shù)據(jù)和state中的數(shù)據(jù)相等沒(méi)有必要更新
    // if (this.state == nextState) {
    // 滿足條件就不更新，傳進(jìn)來(lái)的state是兩個(gè)對(duì)象，當(dāng)每次更新的時(shí)候?qū)ο笏傅牡刂范际遣灰粯拥模圆荒苤苯颖容^，要將對(duì)象轉(zhuǎn)換為字符串進(jìn)行比較
    if (JSON.stringify(this.state) == JSON.stringify(nextState)) {
      return false;
    } else {
      return true;//返回false 表示放棄更新，返回true 表示繼續(xù)更新
    }
  }
  componentWillReceiveProps(nextProps) {//Props更新，才會(huì)執(zhí)行(可以用這個(gè)函數(shù)來(lái)監(jiān)聽(tīng)Props的變化)
    // nextProps 是最新的數(shù)據(jù)的對(duì)象
    // 用這個(gè)函數(shù)監(jiān)聽(tīng)父組件傳來(lái)的數(shù)據(jù)是否有變化
    console.log('componentWillReceiveProps 將要更新');
  }
  componentWillUpdate() {
    console.log('componentWillUpdate 將要更新');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate 更新完成');
  }
  // 卸載期
  componentWillUnmount() {
    console.log('componentWillUnmount 將要卸載');
    // 在這里釋放所占用的資源(網(wǎng)路請(qǐng)求，定時(shí)器，事件監(jiān)聽(tīng))
    clearInterval(this.timerid);
  }
  // render方法在組件初次渲染時(shí)會(huì)執(zhí)行一次，在之后的組件每次更新時(shí)都會(huì)執(zhí)行一次
  render() { //渲染組件模板到視圖
    return (
      <div>
        <h1 className="class" id="big" onClick={() => { this.handleClick() }}>hello reactjs</h1>
        {/* 父組件先更新更新的時(shí)候子組件變化子組件更新子組件更新完父組件才更新完成 */}
        <Child title={this.state.count} />
      </div>
    );
  }
  handleClick() {//組件狀態(tài)
    this.setState({ count1 });
  }
}
export default App;

import React, { Component } from 'react';
class Child extends Component {
    // 掛載期(掛載期的方法會(huì)自動(dòng)執(zhí)行，而且只執(zhí)行一次)
    constructor(props) {//這個(gè)函數(shù)會(huì)在組件掛載前就執(zhí)行，組件并沒(méi)有顯示在頁(yè)面上
        super(props);
        console.log('constructor');
        this.state = {}//初始化組件狀態(tài)
    }
    componentWillReceiveProps(nextProps) {//Props更新，才會(huì)執(zhí)行(可以用這個(gè)函數(shù)來(lái)監(jiān)聽(tīng)Props的變化)
        // nextProps 是最新的數(shù)據(jù)的對(duì)象
        // 用這個(gè)函數(shù)監(jiān)聽(tīng)父組件傳來(lái)的數(shù)據(jù)是否有變化
        // 傳過(guò)來(lái)的值是新的就會(huì)執(zhí)行，傳過(guò)來(lái)的值不是新的就不會(huì)執(zhí)行
        // 這里傳過(guò)來(lái)的數(shù)據(jù)是一個(gè)對(duì)象，要將對(duì)象轉(zhuǎn)換為字符串進(jìn)行比較，因?yàn)閷?duì)象每次更新地址都會(huì)變化，只是值不變
        console.log('Child componentWillReceiveProps 將要更新');
    }
    componentWillUpdate() {
        console.log('Child componentWillUpdate 將要更新');
    }
    componentDidUpdate() {
        console.log('Child componentDidUpdate 更新完成');
    }
    render() {
        return (
            <div>

            </div>
        );
    }
}
export default Child;

import './App.css';
//react中存在兩種形式的組件: 函數(shù)式組件, 類組件
//使用 rcc 快速創(chuàng)建 類組件  ( 主要使用這個(gè) )
//使用 rsf 快速創(chuàng)建 函數(shù)式組件
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      isRead: false//是否勾選協(xié)議
    }
  }
  handleChange(e) {
    this.setState({
      phone: e.target.value
    }, () => {
      console.log(this.state);
    })
  }
  handleChecked(e) {
    this.setState({
      isRead: e.target.checked
    }, () => {
      console.log(this.state);
    })
  }
  render() { //渲染組件模板到視圖
    return (
      <div>
        {/* 非受控元素變成受控元素，通過(guò)value和onChange綁定實(shí)現(xiàn) */}
        {/* value綁定，將組件狀態(tài)綁定到元素的value屬性 */}
        {/* onChange綁定，當(dāng)元素的值發(fā)生改變時(shí)更新元素的值到組件狀態(tài) */}
        <input type="text" value={this.state.phone} onChange={(e) => { this.handleChange(e) }} placeholder='請(qǐng)輸入手機(jī)號(hào)' />
        <input type="checkbox" value={this.state.isRead} onChange={(e) => { this.handleChecked(e) }} />
      </div>
    );
  }
}
export default App;

import './App.css';
//react中存在兩種形式的組件: 函數(shù)式組件, 類組件
//使用 rcc 快速創(chuàng)建 類組件  ( 主要使用這個(gè) )
//使用 rsf 快速創(chuàng)建 函數(shù)式組件
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      pass: '',
      isRead: false//是否勾選協(xié)議
    }
  }
  handleChange(e) {
    // 獲取目標(biāo)控件input元素對(duì)應(yīng)的別名
    // e.target.name
    this.setState({
      // 因?yàn)閯e名是個(gè)變量，所以用方括號(hào)括起來(lái)
      // 如果是單選。復(fù)選框，通過(guò)e.target.checked取值
      // 如果是其它元素，通過(guò)e.target.value取值
      [e.target.name]: ((e.target.type == 'checkbox' || e.target.type == 'radio') ? e.target.checked : e.target.value)
    }, () => {
      console.log(this.state);
    })
  }
  login() {
    // 發(fā)送登錄請(qǐng)求
    // 刪除里面沒(méi)有用的或者取出有用的傳過(guò)去
    // 這樣直接刪除會(huì)影響之前的解決方法是深拷貝
    // delete this.state.isRead;
    // 深拷貝state
    var newState = JSON.parse(JSON.stringify(this.state));
    delete newState.isRead;
    console.log(newState);
    // user_login(this.state).then((res)=>{

    // })
  }
  render() { //渲染組件模板到視圖
    return (
      <div>
        {/* 非受控元素變成受控元素，通過(guò)value和onChange綁定實(shí)現(xiàn) */}
        {/* value綁定，將組件狀態(tài)綁定到元素的value屬性 */}
        {/* onChange綁定，當(dāng)元素的值發(fā)生改變時(shí)更新元素的值到組件狀態(tài) */}
        <input type="text" name="phone" value={this.state.phone} onChange={(e) => { this.handleChange(e) }} placeholder='請(qǐng)輸入手機(jī)號(hào)' /><br />
        <input type="password" name="pass" value={this.state.pass} onChange={(e) => { this.handleChange(e) }} placeholder='請(qǐng)輸入密碼' />
        <input type="checkbox" name="isRead" value={this.state.isRead} onChange={(e) => { this.handleChange(e) }} />
      </div>
    );
  }
}
export default App;