创建组件
创建组件之前要注意以下几点：
组件创建的名称首字母得大写
组件中返回的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中文网其他相关文章！
C和JavaScript：连接解释Apr 23, 2025 am 12:07 AMC 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。
从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AMJavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。
Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AMPython更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。
C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。
JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AMJavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AMPython更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
禅工作室 13.0.1
功能强大的PHP集成开发环境
SublimeText3汉化版
中文版，非常好用
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
