React组件

元素VS组件

元素与组件

什么是组件？

就目前而言，在React中，一个返回React元素的函数就是组件。在Vue中，一个构造选选项表示一个组件

const div  = React.createElement('div',...)
//这是一个React元素(d小写)

const Div = () => React.createElement('div',...)
//这是一个React组件(D大写)

//小写就是元素，大写就是组件(这是一个约定)

React中的两种组件

• 函数组件

function Welcome(props){
    return <h1>Hello,{props.name}</h1>
}

//使用组件(当作标签一样使用)
<Welcome name="jason"/>

• 类组件

class Welcome extends React.Component {
    render(){
        return <h1>Hello,{this.props.name}</h1>
    }
}

//使用组件(当作标签一样使用)
<Welcome name="jsaon" />

使用组件和元素的疑问？

前面我们说了，使用组件，就是把组件当作标签来使用，但是这不是HTML，而是当你使用是，会被React翻译成对应的代码

• 会被翻译成什么(可以使用Bable online查看

//列如：
<div />会被翻译成React.createElement('div')
<Welcome />会被翻译为React.createElement(Welcome)

• React.createElement的逻辑：

  1.如果传入的是一个字符串'div'，则会创建一个div

  2.如果传入的是一个函数，则会调用该函数，获取其返回值

  3.如果传入的是一个类，则会在类的前面加一个new(这会导致执行constructor)，获取一个组件对象，然后调用对象的render方法，获取其返回值

小试牛刀

前面我们已经了解了React的组件的基本知识，那么现在开始试着写一个组件吧。

示例1

类组件和函数组件使用props和state

前面我们已经写了一个类组件和函数组件，当有外部属性的时候该怎么写呢？

• 添加外部数据 示例2

//类组件类直接读取属性
this.props.xxx
//函数组件类直接读取参数
props.xxx

• 添加内部数据 示例3

//类组件用this.state读，this.setState写
{this.state.n}    //读
this.setState(
    (state) =>{
        const n = this.state.n+1
        return {n}
    }
)    //写

//函数组件用useState返回数组，第一项读，第二项写
const [n,setN] = useSatate(0)
setN(n+1)    //写

类组件注意事项

• this.state.n+=1 无效？

1.其实你已经改变了，只不过UI不会自动更新而已
2.调用setState才会触发UI更新(异步更新)
3.因为React没有像Vue监听data一样的监听state

• setState会异步更新UI

setState之后，state不会马上改变，立马读state会失败，推荐用setState(函数)的方式

函数组件注意事项

• 需要通过setX(新值)来更新UI，没有this,一律用参数和变量

复杂的state

直接看示例

组件里有n和m

• 类组件的setState会自动合并第一层属性，但是不会合并第二层属性，要使用...操作符或者使用Object.assign。函数组件完全不会合并需要自己用...操作符合并 示例

事件绑定

类组件事件绑定最佳写法