state vs props
state
的主要作用,是用于组件保存、控制、修改自己的可变状态。一言概之,它在组件内部初始化、只能被组件自身修改,外部不能访问也不能修改。
所以state是一个局部的、只能被组件自身控制的数据源,它的更新方式上通过setState,同时setState会导致组件的重新渲染。
props
的主要作用则是让组件的父组件可以传入一些配置参数,去定制该子组件。它从外部传入,组件内部无法控制也无法修改。除非组件外部主动传入新的props,否则组件的props将是不可变的。
它们都可以决定组件的行为和显示状态,职责很明晰:state
是让组件控制自己的状态,props
是让外部对组件自己进行配置。
鼓励无状态组件
如果很难搞清它们的使用场景,只需要记得开发中尽量少用state,多用props。
没有 state
的组件叫无状态组件(stateless component),设置了 state 的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,也会在一定程度上增强组件的可复用性。
React.js 非常鼓励无状态组件,在 0.14 版本引入了函数式组件——一种定义不能使用 state
组件,这导致我们必须使用props
去传入参数,例如一个类组件原来这么写:
class HelloWorld extends Component {
constructor() {
super()
}
sayHi () {
alert('Hello World')
}
render () {
return (
<div onClick={this.sayHi.bind(this)}>Hello World</div>
)
}
}
用函数式组件这么写:
const HelloWorld = (props) => {
const sayHi = (event) => alert('Hello World')
return (
<div onClick={sayHi}>Hello World</div>
)
}
使用函数式组件的编写方式,代表一个函数就是一个组件,不同于继承Component的类组件,函数式组件只能接受props,而无法像类组件一样有构造函数去初始化state。
可以理解函数式组件就是一种只能接受props并提供render方法的类组件,react鼓励写无状态组件,应该也是为了能够更好地过渡到函数式编程这种新趋势(个人理解)。
当然入门还是写类组件吧,函数式组件好像还是有一些坑要踩的…