一：入門

1：chrome如何安裝React dev Tools

https://blog.csdn.net/gezilan/article/details/79741578  React工具的安裝

2：Hello React

    const vDom = <h1>Hello React</h1> // 千萬不要加引號

    // 渲染虛擬DOM到頁面真實DOM容器中

ReactDOM.render(vDom, document.getElementById('test'))                                                 

3： 

1. 建立虛擬DOM

    /*方式一: 純JS(一般不用)建立虛擬DOM元素物件*/

    const msg = 'I Like You!'

    const myId = test

    const vDOM1 = React.createElement('h2', {id: myId}, msg.toUpperCase())

    // 2. 渲染到真實頁面

    const domContainer = document.getElementById('test1')

    // debugger

ReactDOM.render(vDOM1, domContainer)          

// 1. 建立虛擬DOM

    /*方式二: JSX建立虛擬DOM元素物件*/

    const vDOM2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>

    // debugger

    // 2. 渲染到真實頁面

    ReactDOM.render(vDOM2, document.getElementById('test2'))

4:元件化程式設計

 /*方式1: 工廠函式元件(簡單元件)*/

function MyComponent () {

  return <h2>工廠函式元件(簡單元件)</h2>

}

/*方式2:  ES6類元件(複雜元件)*/

class MyComponent2 extends React.Component {

  render () {

    console.log(this) // MyComponent2的例項物件

    return <h2>ES6類元件(複雜元件)</h2>

  }

二：元件的三大屬性

1: state屬性

一：概念理解

(1)    state是元件物件最重要的屬性, 值是物件(可以包含多個數據)

(2)    元件被稱為"狀態機", 通過更新元件的state來更新對應的頁面顯示(重新渲染元件)

二．編碼操作

(1)    初始化狀態:

  constructor (props) {

    super(props)

    this.state = {

      stateProp1 : value1,

      stateProp2 : value2

    }

  }

(2)    讀取某個狀態值

  this.state.statePropertyName

(3)    更新狀態---->元件介面更新

  this.setState({

    stateProp1 : value1,

    stateProp2 : value2

  })

   class Like extends React.Component{
       constructor(props){
           super(props)
           this.state = {
               isLikeMe : false
           }
           this.Change = this.Change.bind(this)
       }

       Change(){
           //點選的時候執行這個方法
           //設定狀態數值
           const isLikeMe = !this.state.isLikeMe
           this.setState({
               isLikeMe
           })
       }

       render(){
         //執行渲染

        return <h2 onClick={this.Change}>{this.state.isLikeMe?"我喜歡你":"我不喜歡你"}</h2>
       }
   }
   //渲染元件
  ReactDOM.render(<Like/>,document.getElementById("example"))

2: props屬性

(1)    每個元件物件都會有props(properties的簡寫)屬性

(2)    元件標籤的所有屬性都儲存在props中

2 作用

(1)    通過標籤屬性從元件外向元件內傳遞變化的資料

(2)    注意: 元件內部不要修改props資料

class Person extends React.Component{

   render(){
       return (
           <ul>
               <li>name:{this.props.name}</li>
               <li>age:{this.props.age}</li>
               <li>sex:{this.props.sex}</li>
           </ul>
       )
   }

 }
const p1 = {
     name : "小名",
     age : 20,
     sex : "男"
}

 Person.propTypes = {
     name:PropTypes.string.isRequired,
     age:PropTypes.number.isRequired,
     sex:PropTypes.string.isRequired
 }
 Person.defaultProps = {
     name: 'Stranger',
     age : 20,
     sex : "男"
 };

 ReactDOM.render(<Person {...p1}/>,document.getElementById("example1"))
 ReactDOM.render(<Person />,document.getElementById("example2"))

問題: 請區別一下元件的props和state屬性

1)         state: 元件自身內部可變化的資料

2)        props: 從元件外部向元件內部傳遞資料, 元件內部只讀不修改

3: refs與事件處理

class Mycompent extends React.Component{

    constructor(props){
       super(props)
       this.Showinput = this.Showinput.bind(this)
        this.HandleBlur = this.HandleBlur.bind(this)
    }

   Showinput(){
        //點選的時候彈出 content數值
        const input = this.refs.content; //獲取到input元素//類似於dom的標識
        alert(input.value)
    }

    HandleBlur(event){
          //event.target表示觸發的這個元素
        alert(event.target.value)
    }

    render(){
        return (
           <div>
               <input ref="content" type="text"/>  
               <button onClick={this.Showinput}>點我</button>  
               <input type="text" placeholder="失去焦點" onBlur={this.HandleBlur}/>
           </div>
        )
    }
}

ReactDOM.render(<Mycompent/>,document.getElementById("example"));