React入門學習：React建立元件的方法
- 不言原創
- 2018-08-22 17:41:501502瀏覽
建立元件
建立元件之前要注意以下幾點：
#元件所建立的名稱首字母得大寫
元件中傳回的JSX只能是一個根節點，所有的內容得用一個元素都框起來
#1.無狀態函數式元件
#無狀態函數式元件可以理解成就是一個函數產生的，使得程式碼的可讀性更好，並且精簡、便利，減少了冗餘，無狀態元件有以下特點：
元件無法被實例化，整體渲染提高
元件不能存取this對象，因為沒有實例化，所以無法存取this物件
元件沒有生命週期
無狀態元件只能存取輸入的props，沒有state狀態
import React from 'react'
import { connect } from 'dva';
function CreateComponent(props) {
console.log(props);
return (
<p>
<span>{props.name}今年{props.age}岁</span>
</p>
)
}
export default connect(state => ({
name:'小明',
age:15
}))(CreateComponent);
2.React.Component類別元件
每個元件類別必須要實作一個render方法，這裡要特別注意，這個render方法必須返回一個JSX元素即要用一個最外層的元素將所有內容都包裹起來，如果返回並列多個JSX元素是不合法，如下所示：
import React from 'react'
class CreateComponent extends React.Component {
render() {
return(
<p>
<h2>标题</h2>
<ul>
<li>首先</li>
<li>其次</li>
<li>最后</li>
</ul>
</p>
)
}
}
export default CreateComponent;
以上實例，就是把h2元素和ul用一個p都給包起來
1.元件的事件監聽
import React from 'react'
class CreateComponent extends React.Component {
clickFunc = (e) => {
console.log("监听:",e.target.innerHTML);
}
clickValue = (value) => {
console.log(value);
}
render() {
return (
<p>
<a onClick={this.clickFunc}>监听事件</a>
<br/>
<a onClick={this.clickValue.bind(this,123)}>this对象</a>
</p>
)
}
}
export default CreateComponent;
以上就是事件監聽和傳參實例
2.元件的state和setState
通常在元件中，state是用來放這個元件內部參數的狀態的，而setState是用來改變state裡面的參數，例如：
import React from 'react'
class CreateComponent extends React.Component {
state = {
flag : true
}
clickValue = () => {
this.setState({
flag: !this.state.flag
})
}
render() {
return (
<p>
<span>flag的值为：{this.state.flag ? '真' : '假'}</span>
<br/>
<button onClick={this.clickValue}>改变flag值</button>
</p>
)
}
}
export default CreateComponent;
3.元件的props
props是元件裡面的屬性，在元件內部是不能更改自己本身的props的，例如，建立一個元件，然後在另一個元件裡面調用這個元件，如下：
import React from 'react';
function NewComponent(props) {
return (
<p>
{props.content}
</p>
);
}
export default NewComponent;
建立一個元件NewComponent,然後調用，如下：
import React from 'react'
import NewComponent from './newComponent.js'
class CreateComponent extends React.Component {
render() {
return (
<p>
<NewComponent content={'我是内容'} />
</p>
)
}
}
export default CreateComponent;
從這裡可以看出，props就是元件帶入的屬性值，props其實就是讓外部元件對自己進行配置，而state是元件控制自己的狀態
4.元件的生命週期
##constructor元件初始化：
constructor初始化一些參數屬性等等componentWillMount元件渲染之前：
componentWillMount這個函數在react16.3.0之後慢慢的被棄用了，使用componentDidMount取代##componentDidMount元件渲染之後：componentDidMount在元件渲染之後實行，可以載入資料
# render元件渲染：render元件渲染顯示頁面
import React from 'react'
class CreateComponent extends React.Component {
constructor () {
super()
console.log('construct:页面初始化')
}
componentWillMount () {
console.log('componentWillMount：页面将要渲染')
}
componentDidMount () {
console.log('componentDidMount：页面渲染结束')
}
render() {
console.log('render：页面渲染');
return (
<p>
页面渲染
</p>
)
}
}
export default CreateComponent;
輸出結果：
construct:页面初始化 componentWillMount：页面将要渲染 render：页面渲染 componentDidMount：页面渲染结束componentWillUnmount元件刪除
# componentWillUnmount函數是在元件要刪除之前執行的函數，如下程式碼：
import React from 'react';
class NewComponent extends React.Component {
componentWillUnmount() {
console.log('componentWillUnmount:将要从页面中删除');
}
render() {
return (
<p>
{this.props.content}
</p>
);
}
}
export default NewComponent;
建立一個元件NewComponent，然後在CreateComponent元件中引入這個元件，如下：
import React from 'react'
import NewComponent from "./newComponent.js";
class CreateComponent extends React.Component {
constructor () {
super()
console.log('construct:页面初始化');
this.state = {
content:'测试组件',
isDelete:false
}
}
componentWillMount () {
console.log('componentWillMount：页面将要渲染')
}
componentDidMount () {
console.log('componentDidMount：页面渲染结束')
}
deleteFunc = () => {
this.setState({
isDelete:true
})
}
render() {
console.log('render：页面渲染');
return (
<p>
页面渲染
<input type="button" value='删除' onClick={this.deleteFunc}/>
{!this.state.isDelete?(
<NewComponent content={this.state.content}/>
):(null)}
</p>
)
}
}
export default CreateComponent;
當點擊刪除按鈕的時候，元件NewComponent會被刪除，在刪除之前會執行componentWillUnmount函數
輸出結果：
construct:页面初始化 componentWillMount：页面将要渲染 render：页面渲染 componentDidMount：页面渲染结束 componentWillUnmount:将要从页面中删除
以上幾個生命週期是我們會常用到的元件生命週期，元件的生命週期還有更新階段的生命週期，不過這些比較少用，這裡簡單介紹一下：
shouldComponentUpdate(nextProps, nextState)透過這個方法控制元件是否重新渲染，如果返回false不會重新渲染，如下
import React from 'react'
import NewComponent from "./newComponent.js";
class CreateComponent extends React.Component {
constructor () {
super()
console.log('construct:页面初始化');
this.state = {
content:'测试组件',
isDelete:false
}
}
componentWillMount () {
console.log('componentWillMount：页面将要渲染')
}
componentDidMount () {
console.log('componentDidMount：页面渲染结束')
}
shouldComponentUpdate(nextProps, nextState){
if(nextState.isDelete){
return false;
}
}
deleteFunc = () => {
this.setState({
isDelete:true
})
}
render() {
console.log('render：页面渲染');
return (
<p>
页面渲染
<input type="button" value='删除' onClick={this.deleteFunc}/>
{!this.state.isDelete?(
<NewComponent content={this.state.content}/>
):(null)}
</p>
)
}
}
export default CreateComponent;
此時點擊刪除按鈕，頁面沒有進行渲染，那是因為在shouldComponentUpdate中設定了返回值為false，當返回值為false的時候，頁面無法重新渲染。這個函數第一個參數表示最新的props，第二個參數表示最新的state
componentWillReceiveProps(nextProps)元件從父元件接收到新的props之前調用，函數的參數nextProps表示接收到的資料
在NewComponent元件中：
import React from 'react';
class NewComponent extends React.Component {
componentWillUnmount() {
console.log('componentWillUnmount:将要从页面中删除');
}
componentWillReceiveProps(nextProps){
console.log(nextProps);
}
render() {
return (
<p>
{this.props.content}
</p>
);
}
}
export default NewComponent;
在元件CreateComponent中：
import React from 'react'
import NewComponent from "./newComponent.js";
class CreateComponent extends React.Component {
constructor () {
super()
console.log('construct:页面初始化');
this.state = {
content:'测试组件',
isDelete:false
}
}
componentWillMount () {
console.log('componentWillMount：页面将要渲染')
}
componentDidMount () {
console.log('componentDidMount：页面渲染结束')
}
changeFunc = () => {
this.setState({
content:'文字修改'
})
}
render() {
console.log('render：页面渲染');
return (
<p>
页面渲染
<input type="button" value='修改content' onClick={this.changeFunc}/>
{!this.state.isDelete?(
<NewComponent content={this.state.content}/>
):(null)}
</p>
)
}
}
export default CreateComponent;
#不過componentWillReceiveProps將在react16.3.0開始之後棄用
componentWillUpdate：元件重新渲染之前呼叫這個方法，將在react16.3.0開始之後棄用
#componentDidUpdate ：元件重新渲染並且把更改變更到真實的DOM 以後呼叫
注意：componentWillUpdate、componentWillReceiveProps、componentWillMount這三個生命週期將在react116 .3.0之後開始棄用相關推薦：
以上是React入門學習：React建立元件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn