Rumah > Artikel > hujung hadapan web > React入门学习：React创建组件的方法
React入门学习：React创建组件的方法
- 不言asal
- 2018-08-22 17:41:501511semak imbas
创建组件
创建组件之前要注意以下几点：
组件创建的名称首字母得大写
组件中返回的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之后开始弃用
相关推荐：
Atas ialah kandungan terperinci React入门学习：React创建组件的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!