<b>智能组件和木偶组件是react中常用的组件</b>
智能组件
通俗来讲就是比较聪明的组件,它是数据的所有者,它拥有数据、且拥有操作数据的action,但是它不实现任何具体功能。它会将数据和操作action传递给子组件,让子组件来完成UI或者功能。这就是智能组件,也就是项目中的各个页面。例如:
class SearchBar extends React.Component {
constructor(props) {//props需要作为参数传入
super(props);//需要使用super,如果没有this就会是undefined
this.state = {
value: '',
};
this.handlerChange = this.handlerChange.bind(this);//ES6写法
}
handlerChange(event) {
this.setState({
value: event.target.value,
});
}
render() {
return <input onChange={this.handlerChange} />;
}
}-
木偶组件
通俗来讲就是比较傻的组件,它就是一个工具,不拥有任何数据、及操作数据的action,给它什么数据它就显示什么数据,给它什么方法,它就调用什么方法。例如:
class Hello extends React.Component {//第一种写法
constructor(props) {//props需要作为参数传入
super(props);//需要使用super,如果没有this就会是undefined
}render() { return <div>Hello {props.value}</div>; } } //Stateless Functions 第二种写法 function Hello(props) { return <div>Hello {props.value}</div>; }