如何使用React Hooks将React类组件转换为功能组件
介绍
React的最新alpha版本引入了一个称为Hooks的新概念。钩子被引入到React中以解决常见问题。但是，它们主要用作类的替代方法。使用Hooks，可以创建使用状态和生命周期方法的功能组件。
钩子目前在React v16.7.0-alpha中可用。没有删除类的计划。钩子提供了另一种编写React的方式。
鉴于Hook仍然是新手，许多开发人员都希望将其概念应用到现有的React应用程序或新应用程序中。在本文中，您将探索使用React Hooks将React类组件转换为功能组件的五种方法。
先决条件
要完成本教程，您需要：
- 熟悉JavaScript。您可以查看“如何在JavaScript中编码”系列以了解更多信息并开始使用。
- 熟悉React。您可以查看我们的React.js系列中的How to Code指南，以帮助您入门。
不需要本地开发，但提供了CodeSandbox示例以供进一步实验。
步骤1 —了解没有状态或生命周期方法的类
让我们从一个既没有状态又没有生命周期组件的React类开始：
ExampleClassComponent.js
import React, { Component } from 'react';
class App extends Component {
alertName = () => {
alert('John Doe');
};
render() {
return (
<div>
<h3>This is a Class Component</h3>
<button onClick={this.alertName}>
Alert
</button>
</div>
);
}
};
export default App;
复制
在这里，您有一个典型的React类，该类缺少状态或生命周期方法。单击按钮时，它会提醒名称。
该类的功能等效项如下所示：
ExampleFunctionalComponent.js
import React from 'react';
function App() {
const alertName = () => {
alert('John Doe');
};
return (
<div>
<h3>This is a Functional Component</h3>
<button onClick={alertName}>
Alert
</button>
</div>
);
};
export default App;
复制
像第一个示例一样，此功能类的行为也很典型。
但是，此示例未使用Hooks或任何新内容。在这些示例中，您不需要状态或生命周期。
让我们看一下带有状态的基于类的组件，并学习如何使用Hooks将它们转换为功能组件。
第2步-将钩子添加到带有状态的类中
让我们考虑一种情况，您有一个全局名称变量，可以在应用程序中从文本输入字段更新该变量。
在React中，您可以通过在state对象中定义name变量并setState()在我们有一个新值来更新name变量时调用以下方法来处理这种情况：
ExampleClassComponentWithState.js
import React, { Component } from 'react';
class App extends Component {
state = {
name: ''
}
alertName = () => {
alert(this.state.name);
};
handleNameInput = e => {
this.setState({ name: e.target.value });
};
render() {
return (
<div>
<h3>This is a Class Component</h3>
<input
type="text"
onChange={this.handleNameInput}
value={this.state.name}
placeholder="Your Name"
/>
<button onClick={this.alertName}>
Alert
</button>
</div>
);
}
}
export default App;
复制
当用户在输入字段中输入名称并单击“警报”按钮时，它将弹出一个警报，其中警报的状态已定义。
您可以使用Hooks将整个类转换为功能性的React组件：
ExampleFunctionalComponentWithState.js
import React, { useState } from 'react';
function App() {
const [name, setName] = useState('John Doe');
const alertName = () => {
alert(name);
};
const handleNameInput = e => {
setName(e.target.value);
};
return (
<div>
<h3>This is a Functional Component</h3>
<input
type="text"
onChange={handleNameInput}
value={name}
placeholder="Your Name"
/>
<button onClick={alertName}>
Alert
</button>
</div>
);
};
export default App;
复制
在这里，您已经介绍了useStateHook。它允许您在React功能组件中使用状态。通过useState()挂钩，您可以在此功能组件中使用状态。它使用类似的语法并为数组分配了解构分配。
考虑这一行：
const [name, setName] = useState('John Doe')
复制
在这里，name相当于this.state普通类组件中的，并且setName相当于this.setState。
useState()Hook中状态的初始值来自一个参数。换句话说，useState()参数是状态的初始值。您可以将其设置为'John Doe'。这意味着处于状态的名称的初始状态为'John Doe'。
这段代码是一个示例，说明如何使用Hooks将具有状态的基于类的React组件转换为功能组件。
让我们探索其他场景，包括具有多个状态属性的类。
步骤3 —将钩子添加到具有多个状态属性的类
您已经研究了如何使用转换一个状态属性useState，但是当您具有多个状态属性时，相同的方法将行不通。如果，例如，你有两个或多个输入字段userName，firstName以及lastName，那么你将有三个状态特性基于类的成分：
ExampleClassComponentWithMultipleStateProperties.js
import React, { Component } from 'react';
class App extends Component {
state = {
userName: '',
firstName: '',
lastName: ''
};
logName = () => {
console.log(this.state.userName);
console.log(this.state.firstName);
console.log(this.state.lastName);
};
handleUserNameInput = e => {
this.setState({ userName: e.target.value });
};
handleFirstNameInput = e => {
this.setState({ firstName: e.target.value });
};
handleLastNameInput = e => {
this.setState({ lastName: e.target.value });
};
render() {
return (
<div>
<h3>This is a Class Component</h3>
<input
type="text"
onChange={this.handleUserNameInput}
value={this.state.userName}
placeholder="Your Username"
/>
<input
type="text"
onChange={this.handleFirstNameInput}
value={this.state.firstName}
placeholder="Your First Name"
/>
<input
type="text"
onChange={this.handleLastNameInput}
value={this.state.lastName}
placeholder="Your Last Name"
/>
<button
className="btn btn-large right"
onClick={this.logName}
>
Log Names
</button>
</div>
);
}
}
export default App;
复制
要将此类转换为带有Hooks的功能组件，您将不得不采取一些非常规的方法。使用useState()挂钩，上面的示例可以写成：
ExampleFunctionalComponentWithMultipleStateProperties.js
import React, { useState } from 'react';
function App() {
const [userName, setUsername] = useState('');
const [firstName, setFirstname] = useState('');
const [lastName, setLastname] = useState('');
const logName = () => {
console.log(userName);
console.log(firstName);
console.log(lastName);
};
const handleUserNameInput = e => {
setUsername(e.target.value);
};
const handleFirstNameInput = e => {
setFirstname(e.target.value);
};
const handleLastNameInput = e => {
setLastname(e.target.value);
};
return (
<div>
<h3>This is a Functional Component</h3>
<input
type="text"
onChange={handleUserNameInput}
value={userName}
placeholder="Your Username"
/>
<input
type="text"
onChange={handleFirstNameInput}
value={firstName}
placeholder="Your First Name"
/>
<input
type="text"
onChange={handleLastNameInput}
value={lastName}
placeholder="Your Last Name"
/>
<button
className="btn btn-large right"
onClick={logName}
>
Log Names
</button>
</div>
);
};
export default App;
复制
这是此示例的CodeSandbox。
这演示了如何使用useState()Hook将具有多个状态属性的基于类的组件转换为功能组件。
第4步-将钩子添加到带有State和 componentDidMount
让我们考虑使用state和的类componentDidMount。为了进行演示，您将看到一个场景，其中您为三个输入字段设置了初始状态，并在五秒钟后将它们全部更新为一组不同的值。
为此，您将为输入字段声明一个初始状态值，并实现一个componentDidMount()生命周期方法，该方法将在初始渲染之后运行以更新状态值：
ExampleClassComponentWithStateAndComponentDidMount.js
import React, { Component } from 'react';
class App extends Component {
state = {
// initial state
userName: 'johndoe',
firstName: 'John',
lastName: 'Doe'
}
componentDidMount() {
setInterval(() => {
this.setState({
// update state
userName: 'janedoe',
firstName: 'Jane',
lastName: 'Doe'
});
}, 5000);
}
logName = () => {
console.log(this.state.userName);
console.log(this.state.firstName);
console.log(this.state.lastName);
};
handleUserNameInput = e => {
this.setState({ userName: e.target.value });
};
handleFirstNameInput = e => {
this.setState({ firstName: e.target.value });
};
handleLastNameInput = e => {
this.setState({ lastName: e.target.value });
};
render() {
return (
<div>
<h3>This is a Class Component</h3>
<input
type="text"
onChange={this.handleUserNameInput}
value={this.state.userName}
placeholder="Your Username"
/>
<input
type="text"
onChange={this.handleFirstNameInput}
value={this.state.firstName}
placeholder="Your First Name"
/>
<input
type="text"
onChange={this.handleLastNameInput}
value={this.state.lastName}
placeholder="Your Last Name"
/>
<button
className="btn btn-large right"
onClick={this.logName}
>
Log Names
</button>
</div>
);
}
}
export default App;
复制
当应用运行时，输入字段将具有您在状态对象中定义的初始值。componentDidMount()五秒钟后，这些值将更新为您在方法内部定义的值。
接下来，您将使用ReactuseState和useEffectHooks将此类转换为功能组件：
ExampleFunctionalComponentWithStateAndComponentDidMount.js
import React, { useState, useEffect } from 'react';
function App() {
const [userName, setUsername] = useState('johndoe');
const [firstName, setFirstname] = useState('John');
const [lastName, setLastname] = useState('Doe');
useEffect(() => {
setInterval(() => {
setUsername('janedoe');
setFirstname('Jane');
setLastname('Doe');
}, 5000);
});
const logName = () => {
console.log(userName);
console.log(firstName);
console.log(lastName);
};
const handleUserNameInput = e => {
setUsername({ userName: e.target.value });
};
const handleFirstNameInput = e => {
setFirstname({ firstName: e.target.value });
};
const handleLastNameInput = e => {
setLastname({ lastName: e.target.value });
};
return (
<div>
<h3>This is a Functional Component</h3>
<input
type="text"
onChange={handleUserNameInput}
value={userName}
placeholder="Your Username"
/>
<input
type="text"
onChange={handleFirstNameInput}
value={firstName}
placeholder="Your First Name"
/>
<input
type="text"
onChange={handleLastNameInput}
value={lastName}
placeholder="Your Last Name"
/>
<button
className="btn btn-large right"
onClick={logName}
>
Log Names
</button>
</div>
);
};
export default App;
复制
这是此示例的CodeSandbox。
在功能方面，此组件的作用与上一个示例完全相同。唯一的区别是，您没有使用在类组件中使用的常规state对象和componentDidMount()生命周期方法，而是使用了useState和useEffect挂钩。
第5步-添加鱼钩与国家一类，componentDidMount和componentDidUpdate
接下来，让我们看一下带有状态和两个生命周期方法的React类：componentDidMount和componentDidUpdate。到目前为止，大多数解决方案都使用了useStateHook。在此示例中，您将专注于useEffect挂钩。
为了最好地演示它是如何工作的，让我们修改代码以动态更新<h3>页面上的标题。
当前，标题显示This is a Class Component。现在，您将定义一种componentDidMount()方法来更新标头，使其Welcome to React Hooks在三秒钟后显示：
ExampleClassComponentWithStateAndTwoLifecycleMethods.js
import React, { Component } from 'react';
class App extends Component {
state = {
header: 'Welcome to React Hooks'
}
componentDidMount() {
const header = document.querySelectorAll('#header')[0];
setTimeout(() => {
header.innerHTML = this.state.header;
}, 3000);
}
render() {
return (
<div>
<h3 id="header">This is a Class Component</h3>
</div>
);
}
}
export default App;
复制
应用运行时，它将以初始标题开始，This is a Class Component并Welcome to React Hooks在三秒钟后更改为。这是经典componentDidMount()行为，因为它会在render函数成功执行后运行。
让我们添加功能来动态更新另一个输入字段中的标题，以便在键入时使用新文本更新标题。
为此，您将需要实现componentDidUpdate()生命周期方法：
ExampleClassComponent.js
import React, { Component } from 'react';
class App extends Component {
state = {
header: 'Welcome to React Hooks'
}
componentDidMount() {
const header = document.querySelectorAll('#header')[0];
setTimeout(() => {
header.innerHTML = this.state.header;
}, 3000);
}
componentDidUpdate() {
const node = document.querySelectorAll('#header')[0];
node.innerHTML = this.state.header;
}
handleHeaderInput = e => {
this.setState({ header: e.target.value });
};
render() {
return (
<div>
<h3 id="header">This is a Class Component</h3>
<input
type="text"
onChange={this.handleHeaderInput}
value={this.state.header}
/>
</div>
);
}
}
export default App;
复制
在这里，你有state，componentDidMount()和componentDidUpdate()。当您运行该应用程序时，该componentDidMount()功能会将标头更新为Welcome to React Hooks三秒钟。当您开始在标题文本输入字段中输入内容时，<h3>文本将使用componentDidUpdate()方法中定义的输入文本进行更新。
接下来，您将使用useEffect()Hook将此类转换为功能组件：
ExampleFunctionalComponentWithStateAndTwoLifecycleMethods.js
import React, { useState, useEffect } from 'react';
function App() {
const [header, setHeader] = useState('Welcome to React Hooks');
useEffect(() => {
const newheader = document.querySelectorAll('#header')[0];
setTimeout(() => {
newheader.innerHTML = header;
}, 3000);
});
const handleHeaderInput = e => {
setHeader(e.target.value);
};
return (
<div>
<h3 id="header">This is a Functional Component</h3>
<input
type="text"
onChange={handleHeaderInput}
value={header}
/>
</div>
);
};
export default App;
复制
在CodeSandbox上查看此示例。
使用此组件，您可以通过使用该useEffect()Hook实现与以前相同的功能。您还优化了代码，因为您不必为componentDidMount()和componentDidUpdate()函数编写单独的代码。使用useEffect()挂钩，您将获得两者的功能。这是因为useEffect()默认情况下，在初始渲染之后和每个后续更新之后都运行。
第6步-转换PureComponent为React memo
React PureComponent的工作方式类似于Component。它们之间的主要区别在于，React.Component它没有实现shouldComponentUpdate()生命周期方法，而React.PureComponent却没有实现。
如果您的应用程序在render()给定相同的道具和状态的React.PureComponent情况下函数呈现的结果相同，则可以在某些情况下提高性能。
React.memo()以类似的方式工作。当您的功能组件使用相同的道具呈现相同的结果时，可以将其包装在调用中React.memo()以提高性能。使用PureComponent和React.memo()给作出反应的应用性能的显着增加，因为它降低了在应用中呈现操作的数量。
要了解它们的作用，您将首先查看组件每两秒钟渲染一次的代码，无论值或状态是否发生变化：
ExampleClassComponent.js
import React, { Component } from 'react';
function Unstable(props) {
// monitor how many times this component is rendered
console.log('Rendered Unstable component');
return (
<div>
<p>{props.value}</p>
</div>
);
};
class App extends Component {
state = {
value: 1
};
componentDidMount() {
setInterval(() => {
this.setState(() => {
return { value: 1 };
});
}, 2000);
}
render() {
return (
<div>
<Unstable value={this.state.value} />
</div>
);
}
}
export default App;
复制
当您运行该应用程序并检查日志时，您会注意到它每两秒钟渲染一次组件，而状态或道具没有任何变化。使用PureComponent和可以改善这种情况React.memo()。
大多数时候，您只想在状态或道具发生变化时重新渲染组件。使用上面的示例，您可以对其进行改进，以PureComponent使组件仅在状态或道具发生变化时才重新渲染。
您可以通过导入PureComponent和扩展它来完成此操作：
ExamplePureComponent.js
import React, { PureComponent } from 'react';
function Unstable(props) {
console.log('Rendered Unstable component');
return (
<div>
<p>{props.value}</p>
</div>
);
};
class App extends PureComponent {
state = {
value: 1
};
componentDidMount() {
setInterval(() => {
this.setState(() => {
return { value: 1 };
});
}, 2000);
}
render() {
return (
<div>
<Unstable value={this.state.value} />
</div>
);
}
}
export default App;
复制
现在，如果再次运行该应用程序，则只会获得初始渲染。在那之后没有其他事情发生。这是因为您有class App extends PureComponent {}而不是class App extends Component {}。
这解决了不考虑当前状态而重新渲染组件的问题。但是，如果在setState方法中实现状态更改，则会遇到另一个问题。
例如，考虑对的以下更改setState()：
当前value设置为1：
componentDidMount() {
setInterval(() => {
this.setState(() => {
return { value: 1 };
});
}, 2000);
}
复制
让我们考虑value设置为的情况Math.random()：
componentDidMount() {
setInterval(() => {
this.setState(() => {
return { value: Math.round(Math.random()) };
});
}, 2000);
}
复制
在这种情况下，第一个示例组件将在每次值更新为下一个随机数时重新呈现。但是，PureComponent仅当状态或道具发生更改时，才可以重新渲染组件。
现在，您可以探索如何使用React.memo()以实现相同的修复程序。为此，将组件包装为React.memo()：
ExampleReactMemo.js
import React, { Component } from 'react';
const Unstable = React.memo(function Unstable (props) {
console.log('Rendered Unstable component');
return (
<div>
<p>{props.value}</p>
</div>
);
});
class App extends Component {
state = {
val: 1
};
componentDidMount() {
setInterval(() => {
this.setState(() => {
return { value: 1 };
});
}, 2000);
}
render() {
return (
<div>
<Unstable val={this.state.val} />
</div>
);
}
}
export default App;
复制
这是此示例的CodeSandbox。
这样可获得与使用相同的结果PureComponent。该组件仅在初始渲染之后进行渲染，并且直到状态或道具发生更改后才重新进行渲染。
结论
在本教程中，您探索了几种使用React Hooks将现有的基于类的组件转换为功能组件的方法。
您还查看了将ReactPureComponent类转换为的特殊情况React.memo()。
要在您的应用程序中使用Hooks，请确保将您的React版本更新为支持的版本：
"react": "^16.7.0-alpha",
"react-dom": "^16.7.0-alpha",
复制
现在，您有了一个基础，可以进一步使用React Hooks进行实验。
