建立元件之前要注意以下幾點：
#元件所建立的名稱首字母得大寫
元件中傳回的JSX只能是一個根節點，所有的內容得用一個元素都框起來
#無狀態函數式元件可以理解成就是一個函數產生的，使得程式碼的可讀性更好，並且精簡、便利，減少了冗餘，無狀態元件有以下特點：
元件無法被實例化，整體渲染提高
元件不能存取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);每個元件類別必須要實作一個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都給包起來
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;以上就是事件監聽和傳參實例
通常在元件中，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;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是元件控制自己的狀態
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：页面渲染结束
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)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)在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：componentWillUpdate、componentWillReceiveProps、componentWillMount這三個生命週期將在react116 .3.0之後開始棄用相關推薦：
以上是React入門學習：React建立元件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
