React入門（JSX與組件）

1、react入門簡單示例

  <div id="box"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
  <script type="text/babel">
   //創建虛擬DOM
   var vDom1=<h1>hello world!</h1>;
   //渲染虛擬DOM
   ReactDOM.render(vDom1,document.getElementById('box'));   
  </script>

2、JSX練習示例

JSX(全稱：JavaScript和XML)

  <div id="box1"></div>
  <div id="box2"></div>
  <script type="text/babel">
   const myId='Some';
   const contentt='I Like You';
   //創建虛擬DOM
   const vDom1=React.createElement('h2',{id:myId.toUpperCase()},contentt.toLowerCase())
   //渲染虛擬DOM
   ReactDOM.render(vDom1,document.getElementById('box1'));   
   //創建虛擬DOM
   const vDom2=<h3 id={myId.toLowerCase()}>{contentt.toUpperCase()}</h3>
   //渲染虛擬DOM
   ReactDOM.render(vDom2,document.getElementById('box2'));  

3、練習

  <div id="box1"></div>
  <div id="box2"></div>
  <script type="text/babel">
   const names=['some','import','yesterday','water','Tom'];
   //創建虛擬DOM  //數組map方法遍歷
   var vDom=<ul>  
    {names.map((value,index)=><li key={index}>{value}</li>)}
    </ul>
   //渲染虛擬DOM
   ReactDOM.render(vDom,document.getElementById('box1'))

4、模塊、組件；模塊化與組件化

模塊：一般針對於js文件
組件：一般針對於html+css+js文件形成的一個功能
模塊化與組件化（針對與項目而言）

  <div id="box1"></div>
  <div id="box2"></div>
  <script type="text/babel">
   //定義組件
   //方式1：工廠函數組件（簡單組件）
   function Mycomponent(){
    return <h2>工廠函數組件（簡單組件）</h2>
   }
   //渲染組件標籤
   ReactDOM.render(<Mycomponent/>,document.getElementById('box1'))
   //ES6類組件（複雜組件）
   class Mycomponent2 extends React.Component{
    render(){
     return <h2>ES6類組件（複雜組件）</h2>
    }
   }
   //渲染組件標籤
   ReactDOM.render(<Mycomponent2/>,document.getElementById('box2'))

5、組件三大屬性

   class Mycomponent2 extends React.Component{    
    render(){
     console.log(this)
     return <h2>ES6類組件（複雜組件）</h2>
    }
   }

（1）states
states是組件對象最重要的屬性，值是對象（可以包含多個數據）
初始化狀態

constructor（props）{
	super(props);
	this.states={
		stateProp1:value1,
		stateProp2:value2
	}
}

讀取某個狀態值

this.state.statePropertyName

更新狀態——組件界面更新

this.setState({
	stateProp1:value1,
	stateProp2.value2
})

栗子展示

   //創建組件
   class Like extends React.Component{
    constructor(props) {
        super(props);
     //初始化狀態
     this.state={
      isLikeMe:false
     }
     //將新增加方法中的this強制綁定爲組件對象
     this.HandleClik=this.HandleClik.bind(this)
    }
    //新添加的方法：內部的this默認不是組件對象，而是undefined
    HandleClik(){
     //得到狀態
     const isLikeMe=!this.state.isLikeMe;
     //更新狀態
     this.setState({isLikeMe})
    }
    render(){
     //讀取狀態
     //const isLikeMe=this.state.isLikeMe
     const {isLikeMe}=this.state;
     return <h2 onClick={this.HandleClik}>{isLikeMe?'你喜歡我':'我喜歡你'}</h2>
    }
   }   
   //渲染組件標籤   
   ReactDOM.render(<Like />,document.getElementById('box1'));

（2）props

prop-types 安裝使用https://www.npmjs.com/package/prop-types

npm install --save prop-types

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

<!-- development version -->
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>

<!-- production version -->
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>

<!-- development version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>

<!-- production version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>

【1】讀取屬性值

this.props.propertyName

【2】對props中的屬性值進行類型限制和必要性限制

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

【3】擴展屬性：將對象的所有屬性通過props傳遞

<Person {...person}/>

【4】默認屬性值

Person.defaultProps={
	name:'JUNE'
}

【5】組件類的構造函數

constructor(props){
	super(props)
	console.log(props)//查看所有屬性
}

栗子展示

  //創建組件
   function Person(props){
    return(
     <ul>
      <li>姓名{props.name}</li>
      <li>年齡{props.age}</li>
      <li>性別{props.sex}</li>
     </ul>
     ) 
    }   
   const p1={
    name:'TOM',
    age:22,
    sex:'女'
   }
   //渲染組件標籤
   ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('box2'));

栗子展示

   const p2={
    name:'Jarry'
   }

ReactDOM.render(<Person name={p2.name} />,document.getElementById('box2'));

完整栗子展示

   //創建組件
   function Person(props){
    return(
     <ul>
      <li>姓名{props.name}</li>
      <li>年齡{props.age}</li>
      <li>性別{props.sex}</li>
     </ul>
     ) 
    } 
   //指定屬性默認值
   Person.defaultProps={
    age:18,
    sex:'男'
   }
   Person.propTypes={
    name:PropTypes.string.isRequired,
    age:PropTypes.number
   }
   const p1={
    name:'TOM',
    age:22,
    sex:'女'
   }
   const p2={
    name:'Jarry'
   }
   //渲染組件標籤
   ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('box1'));
   //渲染組件標籤
   ReactDOM.render(<Person name={p2.name} />,document.getElementById('box2'));

   class Person extends React.Component{
    constructor(props) {
        super(props);
    }
    render(){
     return(
      <ul>
       <li>姓名{this.props.name}</li>
       <li>年齡{this.props.age}</li>
       <li>性別{this.props.sex}</li>
      </ul>
      ) 
    }
   }

（3）refs
方法一：

    showInput(){
     const cont=this.refs.cont;
     alert(cont.value);     
    }

<input type="text" ref="cont"/>&nbsp;&nbsp;

方法二：

   //創建組件
   class Mycomponent extends React.Component{
    constructor(props) {
        super(props);
     this.showInput=this.showInput.bind(this);
     this.handleBlur=this.handleBlur.bind(this);
    }
    showInput(){ 
     alert(this.cont.value);  
    }
    handleBlur(event){
     alert(event.target.value);
    }
    render(){
     return(
      <div>       
       <input type="text" ref={(cont)=>this.cont=cont}/>&nbsp;&nbsp;
       <button onClick={this.showInput}>提示輸入</button>&nbsp;&nbsp;
       <input type="text" onBlur={this.handleBlur}  placeholder="失去焦點作用"/>
      </div>
     )
    }
   }
   //渲染組件標籤
   ReactDOM.render(<Mycomponent />,document.getElementById('box1'));

6、組件的組合

（1）拆分組件：拆分界面，抽取組件
（2）實現靜態組件：
（3）實現動態組件：

• 動態顯示初始化數據
• 交互功能（從綁定事件監聽開始）

栗子實現

（1）步驟一：靜態組件的是實現

   //創建組件
   class App extends React.Component{
    constructor(props){
     super(props);
     
    }
    render(){
     return(
      <div>
       <h1>組件的組合使用</h1>
       <Add/>
       <List/>
      </div>
     )
    }
   }
   class Add extends React.Component{
    render(){
     return(
      <div>
       <input type="text" />&nbsp;&nbsp;
       <button>添加</button>
      </div>
     )
    }
   }
   class List extends React.Component{
    render(){
     return(
      <div>
       <ul>
        <li>ffff</li>
        <li>sssss</li>
        <li>hhhhh</li>
       </ul>
      </div>
     )
    }
   }
   //渲染組件標籤
   ReactDOM.render(<App />,document.getElementById('box1'));

（2）步驟二：動態顯示數據

   //創建組件
   class App extends React.Component{
    constructor(props){
     super(props);
     //初始化狀態
     this.state={
      items:['fffffff','llllllllll','ggggggg']
     }
     
    }
    render(){
     const {items}=this.state;
     return(
      <div>
       <h1>組件的組合使用</h1>
       <Add/>
       <List items={items}/>
      </div>
     )
    }
   }
   class Add extends React.Component{
    render(){
     return(
      <div>
       <input type="text" />&nbsp;&nbsp;
       <button>添加</button>
      </div>
     )
    }
   }
   class List extends React.Component{
    
    render(){
     const {items}=this.props;
     return(
      <div>
       <ul>
        {items.map((value,index)=><li key={index}>{value}</li>)}
       </ul>
      </div>
     )
    }
   }
   List.propTypes={
    items:PropTypes.array.isRequired
   }
   //渲染組件標籤
   ReactDOM.render(<App />,document.getElementById('box1'));

（3）交互功能實現

   //創建組件
   class App extends React.Component{
    constructor(props){
     super(props);
     //初始化狀態
     this.state={
      items:['fffffff','llllllllll','ggggggg']
     }
     this.addItem=this.addItem.bind(this);
    }
    addItem(item){
     const {items}=this.state;
     items.unshift(item);
     //更新狀態
     this.setState({items})
    }
    render(){
     const {items}=this.state;
     return(
      <div>
       <h1>組件的組合使用</h1>
       <Add count={items.length} addItem={this.addItem}/>
       <List items={items}/>
      </div>
     )
    }
   }
   class Add extends React.Component{
    constructor(props) {
        super(props);
     this.addContent=this.addContent.bind(this);
    }
    addContent(){
     //讀取輸入數據
     const item=this.itemInput.value.trim();
     //檢查合法性
     if(!item){
      return
     }
     //添加
     this.props.addItem(item);
     //清除
     this.itemInput.value=''
     
    }
    render(){
     return(
      <div>
       <input type="text" ref={input=>this.itemInput=input}/>&nbsp;&nbsp;
       <button onClick={this.addContent}>添加 #{this.props.count+1}</button>
      </div>
     )
    }
   }
   Add.propTypes={
    count:PropTypes.number.isRequired,
    addItem:PropTypes.func.isRequired
   }
   class List extends React.Component{
    
    render(){
     const {items}=this.props;
     return(
      <div>
       <ul>
        {items.map((value,index)=><li key={index}>{value}</li>)}
       </ul>
      </div>
     )
    }
   }
   List.propTypes={
    items:PropTypes.array.isRequired
   }
   //渲染組件標籤
   ReactDOM.render(<App />,document.getElementById('box1'));

總結：

• 一個組件只能有一個根節點.
• 子組件不能直接改變父組件的狀態。
• 狀態在那個組件，更新狀態的行爲就應該定義在那個組件。
• 父組件定義函數，傳遞給子組件，子組件調用。

7、組件——收集表單數據

包含表單的組件分類:

非受控組件：需要時手動讀取表單輸入框中的數量。 以下例子針對用戶名
受控組件：表單項輸入數據能自動收集成狀態。以下例子針對密碼

栗子展示

    <div id="box1"></div>
    <div id="box2"></div>
    <script type="text/babel">
        //創建組件
        class LoginForm extends React.Component{
            constructor(props){
                super(props);
    this.state={
     pwd:''
    }
                this.handlerLogin=this.handlerLogin.bind(this);
    this.handleChange=this.handleChange.bind(this);
            }
            handlerLogin(event){
                const username=this.name.value;
    const {pwd}=this.state;
                alert(`用戶名：${username},密碼：${pwd}`);
                event.preventDefault();
            }
   handleChange(event){
    const pwd=event.target.value;
    this.setState({pwd})
   }
            render(){
                return(
                    <form action="/test" onSubmit={this.handlerLogin}>
                        <label>用戶名：</label><input type="text" ref={(name)=>this.name=name}/>&nbsp;&nbsp;
                        <label>密碼</label><input type="password" value={this.state.pwd} onChange={this.handleChange}/>&nbsp;&nbsp;
                        <input type="submit" value="登錄"/>    
                    </form>
                )
            }
        }
        //渲染組件標籤
        ReactDOM.render(<LoginForm/>,document.getElementById('box1'))