函数式的 React 组件更加现代，并支持有用的 hooks，现在流行把旧式的类组件转换为函数式组件。这篇文章总结了转换的一些通用的步骤和陷阱。
通用替换
定义
从
class (w+) extends Component {
改为
const $1: FC = () => {
- 这是没有
export和props的场景
从
(export) default class (w+) extends Component {
改为
$1 const $2: FC = () => {
- 作为第二个捕捉的单词，
$2就是组件名。 -
$2Props应该定义为props的接口名。
Attributes 前缀
从
this.(state.|props.)?
改为
- 假设
props被统一解构。
生命周期函数
从
componentDidMount() {
改为
useEffect(() => {}, []);
-
componentDidUpdate也可以被转换为useEffect，并设置合适的依赖。 -
componentWillUnmount可以转换为对应useEffect处理函数的返回函数。
State 相关语句
从
state = {
data: null,
};
改为
const [data, setData] = useState();
从
this.setState({
data,
});
改为
setData(data)
类方法
从
^(s*)服务器托管网(w+)((w*)) {
改为
$1const $2 = ($3) => {
- 这属于常规函数定义。
-
$1是空格,$2是方法名,$3是参数.
从
^(s*)((w+) = (async )?((w+(, )?)*) =>)
改为
$1const $2
- 这属于箭头函数定义。
-
$1是空格,$2方法名之后的所有内容
类 Getter
从
^(s*)(get) (w+)()
改为
$1const 服务器托管网$2u$3 = () =>
-
u表示对后面捕获的单词首字母大写。 - 对 getter 的调用应该在方法名后加上
()。 - 如果 getter 很简单，可以直接赋值而不用使用函数。
渲染函数
从
render() {
return (
>
);
}
改为
return (
>
);
值得关注的陷阱
命名冲突
类组件可以具有同名的 attributes 和 props，例如 this.data 和 this.props.data。
当 this.data 变为 data，另外 props 经常被解构为 const {data} = props，命名冲突 就产生了。
State 回调
通过 this.setState，我们可以设置一个回调，在 state 确实改变时进行调用，但我们需要把这种方式更新为使用更新的 state 作为依赖的 useEffect。
函数 State
如果 state 的值是函数，你需要把这个函数包裹在另一个匿名函数中，否则 hook 版本的 setState 会把这个函数视为回调。
实际上，在大多情况下，这种 state 是和渲染无关的，所以也许使用 useRef 更加合适。
这个文章展示了一些使用 RegExp 的替换，可以使类组件到函数式组件的替换简单点，另外指出了一些在这个过程中你可能会遇到的陷阱，可以特别留意下，不过当然，不同的场景会存在更多的工作要处理。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
目录 1. IPv4协议及其安全性分析 2. IPsec（IP Security） 2.1 IPsec安全策略 2.1.1 安全关联（Security Association, SA） 2.1.2 安全策略（Security Policy, SP） 2.1.3…
