说说对React中类组件和函数组件的理解？有什么区别？

回答思路：类组件–>函数组件–>区别

类组件

通过ES6类的编写形式去编写组件，该类必须继承React.Component，通过this.props的方式去访问父组件传递过来的参数，且在类组件中必须使用render方法，在return中返回React对象，如下：

class Example extends React.Component{
	constructor(props){
		super(props)
	}
	render(){
		return <h1>Hello,{this.props.name}</h1>
	}
}

函数组件

通过函数编写的形式去实现一个React组件，是React中定义组件最简单的方式，如下：

function Example(props){
	return <h1>hello,{props.name}</h1>;
}

区别

1.编写形式不同
2.状态管理不同
3.生命周期不同
4.调用方式不同
5.获取渲染的值的不同

编写形式不同：

函数组件：

function Example(props){
	return <h1>hello,{props.name}</h1>;
}

类组件：

class Example extends React.Component{
	constructor(props){
		super(props)
	}
	render(){
		return <h1>Hello,{this.props.name}</h1>
	}
}

状态管理不同：

在hooks出来之前，函数组件是无状态组件，不能保管组件的状态，类组件使用setState来保管
函数组件：

const Example = ()=>{
	const [count,setCount] = React.useState(0);
	return (
		<div>
			<p>count:{count}</p>
			<button onClick={()=>setCount(count+1)}>click me</button>
		</div>
	)
}

在使用hooks的情况下，一般如果函数组件调用state，需要创建一个state，提升到你的父组件，然后通过props传递给子组件

生命周期不同：

函数组件不存在生命周期，生命周期钩子都来自于继承React.Component，所以只有类组件有生命周期，但是函数组件使用useEffect也能够完成替代生命周期的作用，例如：

const Example = () =>{
	useEffect(()=>{
		console.log("Hello");
	},[]);
	return <h1>hello</h1>;
}

这里的useEffect就相当于类组件中的componentDidMount生命周期，如果在useEffect中return一个函数，这个函数会在组件卸载的时候执行，相当于componentWillUnmount