react组件

React组件

https://blog.csdn.net/wu_xianqiang/article/details/91320529

定义组件有两个要求：

1. 组件名称必须以大写字母开头
2. 组件的返回值只能有一个根元素

react函数组件

function Clock(props) {
  return (
    <div>
      <h1>当前时间：{props.date.toLocaleTimeString()}</h1>
    </div>
  )
}
function run() {
  ReactDOM.render(
    <Clock date = {new Date()} />,
    document.querySelector('#root')
  )
}
setInterval(run, 1000);

react类组件

function Hello extends React.Component {
  render(){
	return (
	 <div>
	   <h1>姓名：{this.props.name}</h1>
	 </div>
	)
  }
}
ReactDOM.render(
  <Hello name="zjj"/>,
  document.querySelector('#root')
)

注意

1. 所有 React 组件都必须是纯函数，并禁止修改其自身 props
2. 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改
3. 组件的属性和状态改变都会更新视图
4. React是单项数据流，父组件改变了属性，那么子组件视图会更新
5. 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props

函数组件和类组件的区别

1. 函数组件性能比类组件高（类组件使用要进行实例化，函数组件直接执行函数取得结果即可）。因此为了提高性能尽量使用类组件。
2. 类组件有this、生命周期、状态state，而函数组件都没有
3. 函数组件比较简单，一般用于静态没有交互事件内容的组件页面。类组件一般会有交互或者数据修改的操作