React.js 入門學習記錄

1. 定義組件

返回目錄

1. 定義組件有兩種方式：函數組件 和 類組件。
2. 定義函數組件

   //引入 React
   import React from "react";
   //用 function 定義組件
   function App() {
     return <h1>Hello, Fun Component</h1>;
   }
   //導出組件
   export default App;
   

3. 定義類組件

   //引入 React
   import React from "react";
   //用 class 定義組件
   class App extends React.Component {
     render() {
       return <h1>Hello, Cls Component</h1>;
     }
   }
   //導出組件
   export default App;
   

4. 組件名必須以大寫字母開頭。

2. 組件渲染

返回目錄

1. 一般在入口文件使用

   //引入react
   import React from "react";
   //定義組件
   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   //將 {name: 'Sara'} 作爲 props 傳入並 Welcome 組件
   const element = <Welcome name="Sara" />;
   //把 element 渲染到 <div id="root"></div> 標籤上
   ReactDOM.render(element, document.getElementById('root'));
   

3. 組合組件

返回目錄

1. 一個組件可以複用多個組件

   //引入react
   import React from "react";
   //定義組件 Welcome
   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   //定義組件 App
   function App() {
     return (
       <div>
         <Welcome name="Sara" />
         <Welcome name="Cahal" />
         <Welcome name="Edite" />
       </div>
     );
   }
   //渲染組件 App
   ReactDOM.render(<App />, document.getElementById('root'));
   

   警告:組件的返回值只能有一個根元素。要用一個<div>來包裹所有<Welcome />元素。

4. this 綁定

返回目錄

1. 綁定 this 有“構造函數bind”、“直接bind”、“箭頭函數bind”三種

   import React from "react";
   
   function Welcome(props) {
     constructor(props) {
       super(props);
       //構造函數裏bind
       this.handleClick = this.handleClick.bind(this);
     }
     
     return <div>
     	//構造函數裏bind
   	<input onClick={this.handleClick} />
       //直接bind
   	<input onClick={this.handleClick.bind(this)} />
   	//箭頭函數bind
   	<input onClick={e => this.handleClick()} />
     </div>;
   }
   

5. state 內部數據

返回目錄

1. 類組件的state

   import React from "react";
   
   class Example extends React.Component {
       constructor(props){
           super(props);
           //定義默認state
           this.state = {
               name: "John"
           };
       }
       handleClick(e){
           //設置 state 的屬性，會刷新渲染
           this.setState('name', 'Tim');
           this.setState({ name: 'Tim'});
           //獲取 state 的屬性值
           console.log(this.state.name);
       }
       //...
   }
   

6. props 組件參數

返回目錄

1. 函數組件的 props

   import React from "react";
   	
   function Example (props) {
       return (<div>{props.name}</div>)
   }
   

2. 類組件的 props

   import React from "react";
   	
   class Example extends React.Component {
       constructor(props){
           super(props);
       }
       render(){
       	return (<div>{this.props.name}</div>)
   	}
   }
   

7. props 默認定義

返回目錄

1. 類的 props 默認定義

   import React from 'react';
   
   class Example extends React.Component {
       //默認參數
       static defaultProps = {
           name: 'John'
       }
   	constructor(props){
           super(props);
       }
       render(){
       	return (<div>{this.props.name}</div>)
   	}
   }
   

8. props 參數驗證

返回目錄

1. 類的 props 參數驗證

   import React from 'react';
   import PropTypes from 'prop-types'; //引入 prop-types
   
   class Example extends React.Component {
       //內部參數驗證
       static propTypes = {
           name: PropTypes.string.isRequired
       }
   }
   
   //或外部參數驗證，選其一
   Example.propTypes = {
       name: PropTypes.string.isRequired
   };
   

9. return

返回目錄

1. 必須頂層標籤

   import React from "react";
   
   class Example extends React.Component {
       constructor(props){
           super(props);
       }
       render(){
       	//單行
       	return <div></div>
       	//或者多行，要用()包裹
   		return (<div>
   		    <span></span>
   		</div>);
   	}
   }
   

2. 不想要頂層標籤包裹

   import React from "react";
   
   class Example extends React.Component {
       constructor(props){
           super(props);
       }
       render(){
   		//1. Fragment
   		return <React.Fragment>
   		    <div></div>
   		    <div></div>
   		</React.Fragment>
   		//2. React16 支持 數組
   		return [
   		    <div></div>
   		    <div></div>
   		];
   	}
   }
   

10. ref 獲取 DOM 元素

返回目錄

1. 舉例

   import React from "react";
   
   class Example extends React.Component {
       constructor(props){
           super(props);
           this.handle = this.handle.bind(this);
       }
       handle() {
   		//使用
   		this.refs.example 
   	}
       render(){
   		return <React.Fragment>
   			//定義
   			<div ref="example"></div>
   		</React.Fragment>
   	}
   }
   

11. 高階組件 ???

返回目錄

12 Mixins ??? 貌似被遺棄了

返回目錄

13. 添加 css 樣式

返回目錄

1. 添加 css 類名

   let css = "CCS-Example"
   <Component className={css}/>
   //或者
   <Component className="CCS-Example"/>
   

2. 行內樣式

   //配置式
   let style = {
       width:"100px"
   }
   <Component sytle={style}/>
   //或者
   <Component sytle={{ height: '100px' }}/>
   

14. 添加圖片

點我返回目錄

//添加網絡圖片
<img src="http://image.com/1.png" />

//添加本地圖片
let img = require('./image.png');
<img src={img} />

//添加背景圖片
<Component style={
    backgroundImage: "url(" + require("./imgs/bg.jpg") + ")"
} />

15. onClick

返回目錄

16. onChange

返回目錄

17. React.Children.map

返回目錄

//返回數組
React.Children.map(this.props.Children, ()=>());