React基礎篇（四）之建立組件方式分析

本小將講述在 React 中，
一、經過函數 function 方式建立組件並分離成單獨的組件實現，而後傳遞參數給組件使用
二、經過關鍵字 class 來建立組件，並分離成單獨的組件實現，而後傳遞參數給組件使用以及建立私有屬性使用javascript

1 React中建立組件方式一 function

1.1 建立組件並在瀏覽器中渲染效果

//第一步 導入依賴
//這兩個導入進，接收的成員變量名稱必須這樣寫

//用來建立組件、虛擬DOM元素 生命週期
import React from 'react';
//所建立好的組件和虛擬DOM放到頁面上展現
import ReactDOM from 'react-dom';


//建立組合的第一種方式
function HelloWorld() { 
 
   
  //在組件中 return 一個null 則表示此組件是空的 什麼都不會渲染
  return null;
}

const rootDiv = <div>
  這裏是建立組件的第一種方式
  <hr/>
  <HelloWorld/>

</div>;

//第三步 使用ReactDOM 把虛擬DOM 渲染到頁面上
// 參數一 要渲染的虛擬DOM元素
// 參數二 指定頁面上的容器
ReactDOM.render(rootDiv, document.getElementById('app'));

運行在瀏覽器中

在這裏咱們建立了一個 HelloWorld 組件，在組件中返回了null ,因此在瀏覽器中什麼這個組件什麼也沒有渲染。java

//建立組合的第一種方式
function HelloWorld() { 
 
   
  //在組件中 return 一個null 則表示此組件是空的 什麼都不會渲染
  // return null;
  //在這裏必須返回一個合法的 JSX 虛擬 DOM 元素
  return <div>這裏是 HelloWorld 組件 </div>
}

而後運行在瀏覽器中的效果
react

1.2 爲組件傳遞數據

//第一步 導入依賴
//這兩個導入進，接收的成員變量名稱必須這樣寫

//用來建立組件、虛擬DOM元素 生命週期
import React from 'react';
//所建立好的組件和虛擬DOM放到頁面上展現
import ReactDOM from 'react-dom';


//建立組合的第一種方式
//傳入參數
function HelloWorld(props) { 
 
   
  //在組件中 return 一個null 則表示此組件是空的 什麼都不會渲染
  // return null;
  //在這裏必須返回一個合法的 JSX 虛擬 DOM 元素
  //在這裏須要注意的是 形參 props 的值永遠是隻讀的，不能夠從新被賦值
  return <div>這裏是 HelloWorld 組件 傳入參數 name : { 
 
   props.name} age :{ 
 
   props.age}</div>;
}

const people = { 
 
   
  name: '張三',
  age: 29
};
const rootDiv = <div>
  這裏是建立組件的第一種方式
  <hr/>
  { 
 
   /*使用組件並傳入參數*/}
  <HelloWorld name={ 
 
   people.name} age={ 
 
   people.age}/>

</div>;

//第三步 使用ReactDOM 把虛擬DOM 渲染到頁面上
// 參數一 要渲染的虛擬DOM元素
// 參數二 指定頁面上的容器
ReactDOM.render(rootDiv, document.getElementById('app'));

在傳遞參數的時候，咱們能夠注意一下webpack

const rootDiv = <div>
  這裏是建立組件的第一種方式
  <hr/>
  { 
 
   /*使用組件並傳入參數 這裏是將全部的屬性分別寫出來*/}
  <HelloWorld name={ 
 
   people.name} age={ 
 
   people.age}/>
  <hr/>
  { 
 
   /*使用組件並傳入參數 若是屬性比較多，不逐一寫出來時，能夠這樣傳參數*/}
  { 
 
   /* ... 個點表明展開 es6語法*/}
  <HelloWorld { 
 
   ...people}/>

</div>;

1.3 將編寫的 HelloWorld 組件抽離

在src目錄下建立components 文件夾，建立 HelloWorld.jsx文件es6

//建立組合的第一種方式
//傳入參數
import React from 'react';

function HelloWorld(props) { 
 
   
  //在組件中 return 一個null 則表示此組件是空的 什麼都不會渲染
  // return null;
  //在這裏必須返回一個合法的 JSX 虛擬 DOM 元素
  //在這裏須要注意的是 形參 props 的值永遠是隻讀的，不能夠從新被賦值
  return <div>這裏是 HelloWorld 組件 傳入參數 name : { 
 
   props.name} age :{ 
 
   props.age}</div>;
}




//把組件暴露出去
export default HelloWorld

或者寫成web

//建立組合的第一種方式
//傳入參數
import React from 'react';

export function HelloWorld(props) { 
 
   
  //在組件中 return 一個null 則表示此組件是空的 什麼都不會渲染
  // return null;
  //在這裏必須返回一個合法的 JSX 虛擬 DOM 元素
  //在這裏須要注意的是 形參 props 的值永遠是隻讀的，不能夠從新被賦值
  return <div>這裏是 HelloWorld 組件 傳入參數 name : { 
 
   props.name} age :{ 
 
   props.age}</div>;
}

而後在 index.js 中使用的時候導入瀏覽器

//導入HelloWorld組件
//默認，若是不作單獨配置的話，不能省略 .jsx 後綴名
import HelloWorld from './components/HelloWorld.jsx'

若是要省略後綴名，須要在webpack.config.js 配置文件中

配置好後從新運行項目，在導入組件時就能夠寫成app

//導入HelloWorld組件
//默認，若是不作單獨配置的話，不能省略 .jsx 後綴名
//配置好resolve 後，能夠不寫.jsx後綴名，程序自動補全
import HelloWorld from './components/HelloWorld'

而後在這裏咱們可使用別名來表示路徑dom

//導入HelloWorld組件
//默認，若是不作單獨配置的話，不能省略 .jsx 後綴名
// 這裏使用到的@ 表示項目根目錄中的 src 這一層
import HelloWorld from '@/components/HelloWorld.jsx'

這裏使用到了 @ 符號，那麼在 webpack.config.js 中進行配置
svg

2 React中使用class建立組件方式

ES6 中 class 關鍵字是實現面向對象的

//建立組合的第二種方式
//傳入參數
import React from 'react';

export default class ClassHelloWorld extends React.Component { 
 
   
  //在組件中必須有 render函數 用來渲染 DOM結構
  render() { 
 
   
    return (
        <div>
          這裏是使用class關鍵字建立的組件
        </div>
    );
  }
}

而後在index.js中使用時，先導入

//第一步 導入依賴
//這兩個導入進，接收的成員變量名稱必須這樣寫

//用來建立組件、虛擬DOM元素 生命週期
import React from 'react';
//所建立好的組件和虛擬DOM放到頁面上展現
import ReactDOM from 'react-dom';
//導入HelloWorld組件
//默認，若是不作單獨配置的話，不能省略 .jsx 後綴名
// 這裏使用到的@ 表示項目根目錄中的 src 這一層
import HelloWorld from '@/components/HelloWorld';
//這裏是使用 class 建立的組件
import ClassHelloWorld from '@/components/ClassHelloWorld';
//這裏j 模擬數據
const people = { 
 
   
  name: '張三',
  age: 29
};
const rootDiv = <div>
  這裏是建立組件的第一種方式
  <hr/>
  { 
 
   /*使用組件並傳入參數 這裏是將全部的屬性分別寫出來*/}
  <HelloWorld name={ 
 
   people.name} age={ 
 
   people.age}/>
  <hr/>
  { 
 
   /*使用組件並傳入參數 若是屬性比較多，不逐一寫出來時，能夠這樣傳參數*/}
  { 
 
   /* ... 個點表明展開 es6語法*/}
  <HelloWorld { 
 
   ...people}/>
  <hr/>
  這裏是建立組件的第二種方式
  <hr/>
  { 
 
   /*使用組件*/}
  <ClassHelloWorld/>


</div>;

//第三步 使用ReactDOM 把虛擬DOM 渲染到頁面上
// 參數一 要渲染的虛擬DOM元素
// 參數二 指定頁面上的容器
ReactDOM.render(rootDiv, document.getElementById('app'));

2.2 向 class 方式建立的組件中傳入參數

<ClassHelloWorld { 
 
   ...people}/>

在 ClassHelloWorld 組件中經過 props 關鍵字使用傳入的參數

//建立組合的第二種方式
//傳入參數
import React from 'react';

export default class ClassHelloWorld extends React.Component { 
 
   
  //在組件中必須有 render函數 用來渲染 DOM結構
  render() { 
 
   
    return (
        <div>
          這裏是使用class關鍵字建立的組件
          <p> 傳遞的參數 name:{ 
 
   this.props.name} age:{ 
 
   this.props.age}</p>
        </div>
    );
  }
}

瀏覽器中效果

在 class 組件中，可經過 this.state 來定義使用組件私有屬性數據

//建立組合的第二種方式
//傳入參數
import React from 'react';

export default class ClassHelloWorld extends React.Component { 
 
   

  //在構建函數中
  //初始化私有數據 
  constructor(){ 
 
   
    super()
    this.state={ 
 
   
      city:"中國山西太原"
    }
  }
  //在組件中必須有 render函數 用來渲染 DOM結構
  render() { 
 
   
    return (
        <div>
          這裏是使用class關鍵字建立的組件
          { 
 
   /*這裏經過 this.props 來調用外部傳遞過來的參數*/}
          <p> 傳遞的參數 name:{ 
 
   this.props.name} age:{ 
 
   this.props.age}</p>
          { 
 
   /*而後在這裏經過 this.state 來調用私有數據*/}
          <p> 這裏是組件內的私有屬性{ 
 
   this.state.city}</p>
        </div>
    );
  }
}

3 React中function 與class 兩種建立方式的對比

使用class 關鍵字建立的組件，有本身的私有數據和生命週期，使用function 建立的組件，只有props，沒有本身私有數據和生命週期
用 function 建立出來的組件中作無狀態組件，用class關鍵字建立出來的組件叫作有狀態組件

4 組件中 props 與state/data 的區別

4.1 區別一

props 中的數據都是外界傳遞過來的
state / data 中的數據都是組件私有的

4.2 區別二

props 中的數據都是隻讀的，不能從新賦值
state/data 中的數據是可讀可寫的

5 列表實例

//第一步 導入依賴
//這兩個導入進，接收的成員變量名稱必須這樣寫

//用來建立組件、虛擬DOM元素 生命週期
import React from 'react';
//所建立好的組件和虛擬DOM放到頁面上展現
import ReactDOM from 'react-dom';


//父組件
class CourseList extends React.Component { 
 
   

  constructor(props) { 
 
   
    super(props);
    this.state = { 
 
   
      courseList: [
        { 
 
   id: 1, userNmae: '張三', courseName: '語文'},
        { 
 
   id: 2, userNmae: '張三2', courseName: '語文2'},
        { 
 
   id: 3, userNmae: '張三3', courseName: '語文3'}
      ]
    };
  }

  render() { 
 
   
    return (
        <div>

          <h1>課程統計列表</h1>
          { 
 
   /*這裏經過map 來構建*/}
          { 
 
   this.state.courseList.map(item => <CourseItem { 
 
   ...item}/>)}

        </div>
    );
  }
}

//列表中條目的組件

class CourseItem extends React.Component { 
 
   
  render() { 
 
   
    return (
        <div key={ 
 
   this.props.id}>
          <h2>姓名：{ 
 
   this.props.userNmae}</h2>
          <p>課程內容： { 
 
   this.props.courseName}</p>
        </div>
    );
  }
}

//第三步 使用ReactDOM 把虛擬DOM 渲染到頁面上
// 參數一 要渲染的虛擬DOM元素
// 參數二 指定頁面上的容器
ReactDOM.render(<CourseList/>, document.getElementById('app'));

完畢

本文同步分享在博客「早起的年輕人」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。