React中的函数组件与类组件

news/2024/10/21 11:38:43/

在React中，有两种不同的组件形式：函数组件和类组件。它们的写法并不相同。

函数组件

React的函数组件是一个只接受 props 参数并返回元素的 JavaScript 函数（该props与Vue中props一样是只读的，且都是父组件传递给子组件的数据）。

export function MyComponent(props) { // 不同于Vue中的函数组件（有props和ctx两个参数）return <h1>{ props.hobby }</h1>;
}

函数式组件自身没有任何状态（state） 和 生命周期方法，只接受其父组件传递的数据（props）。

类组件

类组件使用class关键字定义，组件名格式必须是大驼峰，且继承于React.component。

class MyComponent extends React.Component {constructor(props) {super(props); // 也可以接受propsthis.state = {} // 组件的状态（响应式状态）// 必须为类组件中的方法显示绑定this（法一），否则在经过babel的转化后（严格模式下）函数方法的this指向undefinedthis.[methodName1] = this.[methodName1].bind(this);}[methodName1]() {} // 类组件的方法// 箭头函数没有自己的this，因此会使用上层作用域的this[methodName2] = () => {}[methodName3]() {} // render函数中的this默认指向组件实例render() { // 类组件固定方法，返回要渲染的内容（jsx）return (<> // 等同于<Fragment></Fragment>,不过Fragment上可以写key<h1>Hello, { this.props.name }</h1><button onClick={this.[methodName1]}>点击按钮</button>{/* 或者在jsx中为类组件中的方法显示绑定this（法一） */}{/* <button onClick={this.[methodName1].bind(this)}>点击按钮</button> */}<button onClick={this.[methodName2]}>点击按钮</button><button onClick={() => this.[methodName3]()}>点击按钮</button></>);}
}