React组件通过函数的方式创建与类的方式创建的异同

函数的方式创建组件与类的方式创建组件的异同

通过函数的方式创建组件:

// 定义显示时间的组件
function Clock(props){
  // props.time必须手动转换为字符串，否则会被作为对象进行解析,会报错
  return (
    <div>
      <div>定时刷新</div>
      <div>{props.time.toLocalTimeString()}</div>
    </div>
  )
}
function tick(){
  const element = <div><Clock time={new Date()}/></div>
  ReactDOM.render(element,document.getElementById('root'));
}
setInterval(tick,1000)

说明:

• 函数名称首字母必须大写,为了区分DOM元素
• 通过函数的参数props可以传递组件的属性信息
• Props数据是只读的
• 单向数据流

缺点: 需要外部代码,比如: "setInterval(tick,1000)来驱动组件的内部属性变化

就因为这个缺点才引出了下面通过类的方式创建组件,接下来我们详细了解一下

通过类的方式创建组件:

class Clock extends React.Component {
  constructor(props){
    super(props)// 这一行需要显示的调用父类构造函数
    // state名字是固定的
    this.state = {
      date: new Date(),
      abc: 'nihao'
    }
  }
  render(){
    return (
      <div>
      	<div>{this.state.abc}</div>
        <div>刷新时间</div>
        <div>{this.state.date.toLocalTimeString()}</div>
      </div>
    )
  }
  componentDidMount() {
    this.tick()
  }
  // 定时更改时间
  tick(){
    setInterval(()=>{
      // 这样的数据处理方式是不对的，因为状态数据的修改，必须通过setState方式
      // this.state.date = new Date();
      this.setState({
        date: new Date()
      })
    },1000)
  }
}
const element = <div><Clock/></div>
ReactDOM.render(element,document.getElementById('root'))

说明:

• 函数名称首字母必须大写,为了区分DOM元素
• 类的方式与函数方式创建组件的显著区别: 类可以包含状态state
• 组件的状态初始化state必须在构造函数constructor中进行,如果需要修改状态,必须通过setState进行
• 组件中的数据只有两种 props和state, 这两种数据都是从父组件想子组件传递,反之不可以(自上而下的单向数据流)
• Props是只读的,state既可读也可以修改

优点: 组件内部可以直接完成状态数据的修改

总结:

综上所述,React项目当然要使用类的方式创建组件了