React中的元素与组件

  1. const div = React.createElement('div',...)   //React元素
  3. const Div = ()=> React.createElement('div',...)  //React组件，注意大小写

组件能与其他物件组合起来，极端的说，一个返回React元素的函数就是React组件。

React的两种组件

函数组件

  1. function Welcome(props){
  2.     return (<h1>hello,{props.name}</h1>)
  3. }
  5. //使用方法:<Welcome name="XXX" />
  6. //props为外部传来的数据

类组件

  1. class Welcome extends React.Component{
  2.     render(){
  3.       return (<h1>hello,{this.props.name}</h1>)
  4.   }
  5. }
  7. //使用方法:<Welcome name="XXX" />
  8. //类组件在标签内直接传<div message="xxx" />，引用时{this.props.message}

组件逻辑

在React中

会被翻译成React.createElement(‘div’)，同理，会被翻译为React.createElement(‘Welcome’)
React.createElement的逻辑：

  • 当传入字符串’div’时，则创建一个div
  • 当传入一个函数，则会调用这个函数，获得其返回值
  • 当传入一个类，会在类前加new(获得实例，执行constructor)，获取一个组件对象的render方法，获取其返回值

    state和setState

    React用state来读，setState来写。因为React推荐数据不可变，setState也不是修改state而是船舰一个新的对象用来存储修改过的state。
    类组件使用this.state,this.setState，函数组件使用useState。
    在类组件中使用setState时，推荐使用函数的写法。
    setState会异步更新UI。
    函数组件内部没有this，一律使用参数和变量。
    类组件中的state有多个：使用setState修改其中一个变量，那么其他变量会沿用上一次的值，而不是被覆盖。需要注意的是setState只会自动合并第一层，不会合并第二层属性。
    函数组件的setState不会自动合并，当有多个变量时可以使用setState({...state,xxx})的写法(或Object.assign())来防止其他属性被覆盖。

    事件绑定

    ```jsx //类组件事件绑定

//类组件的简单写法 addN=()=>{…} //addN为一个箭头函数

```