react笔记之无状态函数式组件

责编:menVScode 2017-08-02 23:07 阅读(579)

        通常我们都是通过一个类来声明一个组件,但是一个组件没有内部状态,那么可以把这个组件声明为一个函数。

export default class Footer extends React.Component{
	constructor(props){
		super(props);
	}
	render(){
		let {
			leftCount,
			doClearCompleted,
			showClearBtn,
			view,
			changeView
		} = this.props;
		//console.log(doClearCompleted)
		var clearBox = null;
		if(showClearBtn){
			clearBox = (
				<button 
					className='clear-completed'
					onClick = {doClearCompleted}
				>clear all completed</button>
			)
		}

		return(
			<footer className='footer'>
				.....
				{clearBox}
			</footer>
		)
	}
}

        Footer组件除了一个render方法,其他方法都不需要,也就是说Footer组件是没有内部状态的,它只是用来显示数据而已。可也把这个组件改为无状态式函数组件:

export default function Footer(props){
	
		let {
			leftCount,
			doClearCompleted,
			showClearBtn,
			view,
			changeView
		} = props;
		//console.log(doClearCompleted)
		var clearBox = null;
		if(showClearBtn){
			clearBox = (
				<button 
					className='clear-completed'
					onClick = {doClearCompleted}
				>clear all completed</button>
			)
		}

		return(
			<footer className='footer'>
				.....
				{clearBox}
			</footer>
		)
	
}

        函数的名字就是组件的名字。

        上方组件组件已经没有this了,我没通过传参的方式获取数据。参数有两个:props和context。

        现在Footer是一个无状态组件,意味着连生命周期也没有了,只是用来显示数据。这是react推荐的一种方式,我们尽量让底层的组件是无状态式的函数组件,只用来显示数据。我们把数据操作的逻辑放在顶层,然后从顶层把数据传到底层,这就无状态式函数组件,它非常的轻量。

标签: react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码