React组件

主要分为组件直接量、类组件、函数组件。

组件直接量

直接当作模板使用，静态的，不算是真正的组件。

类组件

类组件即class组件，因为继承了Component，所以具有了原型上的变量，所以具有状态state，又叫状态组件，特点是有状态（响应式）。反之都是无状态，即纯组件。

state目前只需要知道一旦变化会自动刷新页面，即响应式。

class xxx extends Component {
    constructor(){
        super();
        this.data={
            arr:[1,2,3,4,5]
        }
        this.state='ok'
    }
    render() {
        return (
            <div>
                <Son title='okkkkkkkkkk'></Son>
                <Son1 name='this is Son1'></Son1>
            </div>
        );
    }
}

只有state是响应式的，其他的属性不会被识别，constructor函数如果不写，底层会自动给与默认格式。

函数组件

虽然是纯组件，无状态，但是仅仅在hook出现之前。

const Son1 = (prop) => {
    let style={
        fontSize:100,
        color:'red'
    }
    let arr = [1,2,3,4,5,6,7]
    return (
        <div style={style}>
            {arr.map(x=><h3>{x}</h3>)}
        </div>
    );
}

这里我们使用了箭头函数，其实任何函数的写法都是被允许的。

对于react，类是旧的语法，函数是新的语法，因为hook引入使得函数也具备了状态。同时因为hook出现函数组件比类组件更加高效。

React.createClass创建组件的方式在react 16版本中去除。

高阶组件

基于闭包设计的组件，hoc。

复合组件

又叫组合组件。☞在同一个组件文件中完成多个组件创建和嵌套。

// ff.jsx
class ff extends Component {
    render() {
        return (
            <div>
                <F1></F1>
                <F2></F2>
            </div>
        );
    }
}

class F1 extends Component {
    render() {
        return (
            <div>
                f1
            </div>
        );
    }
}

class F2 extends Component {
    render() {
        return (
            <div>
                f2
            </div>
        );
    }
}

组件嵌套

其实本身基于函数式的组件化开发，就是组件套组件，大致可以理解为下图，最终所有组件都会和根组件内被Render函数一同执行渲染到界面上。（组件响应式刷新局部组件视图）

组件嵌套没有注册的操作：

import Son from './son'
import Son1 from './son1'
class xxx extends Component {
    render() {
        return (
            <div>
                <Son title='okkkkkkkkkk'></Son>
                <Son1 name='this is Son1'></Son1>
            </div>
        );
    }
}

写篇文章攻克React——（4）React组件细分