React组件写法

一、傻瓜组件也叫展示组件

负责根据props显示页面信息

聪明组件也叫容器组件

负责数据的获取、处理

优势：

分离工作组件和展示组件，解耦

提高组件的重用行

提高组件的可用性和代码阅读

便于测试与后续的维护

二、深入理解函数组件

函数式组件是一种无状态组件，为了创建纯展示组件，这种组件只根据传入的props来展示，不涉及到要state状态的操作

组件不会被实例化，整体渲染性能得到提升

组件不能访问this对象

组件无法访问生命周期里的方法

无状态只能访问输入的props。同样的props会得到同样的渲染结果，不会有副作用

大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等，通过多个简单然后合并成一个大应用的设计模式被提倡

import React from 'react'
//新建一个组件页面把组件暴露出去的写法
export default function Fun(){
    return(
        <div>
        函数组件
        </div>
    )
}
//这种写法是在页面内部创建的组件不给外部使用，只供内部页面调用
function Fun(){
    return(
        <div>
        函数组件
        </div>
    )
}

三、class组件的写法

在里面可以写入状态、生命周期、构造函数

import React,{Component} from 'react'
export default class Fun extends Component{
    return(
        <div>
        class组件
        </div>
    )
}

高阶组件--命名with开头

高阶组件属性的添加

编写生命周期

将以上两个高阶组件进行链式调用

实现高阶组件装饰器的写法

高阶组件链式调用的写法看起来比较麻烦也比较难理解

ES7出现了装饰器的语法专门拿来处理这种问题

安装支持装饰器语法的babel编译插件

yarn add --save-dev @babel/plugin-proposal-decorators

更改配置文件代码

组件通信之上下文（context）

上下文context有两个角色

Provider数据提供

Consumer数据读取

使用context可以避免通过中间元素传递props导致元素的丢失，

context的设计目的是为了共享对于一个组件树而言是全局的数据

不使用context的情况下的代码

import React,{Component} from 'React';
//创建一个传递的数据源
let store={
    name:'年后'，
    from:'hunter'
}
class Info extends Component{
    render(){
        return (
            <div>
                <p>姓名：{this.props.name}</p>
                <p>出处：{this.props.from}</p>
            </div>
        )
    }
}
function TooBar(props){
    return(
        <div>
            <Info {...props}></Info>
        </div>
    )
}
export default class Composition extends Component {
    render() {
        return (
            <div>
                <TooBar name={store.name} from={store.from}></TooBar>
            </div>
        )
    }
}
使用context修正后的代码
import React,{Component} from 'React';
//创建上下文
const XdContext =React.createContext();
const {Provider,Consumer}=XdContext
//创建一个传递的数据源
let store={
    name:'年后'，
    from:'hunter'
}
class Info extends Component{
    render(){
        return (
            <Consumer>
            {
            store=>{
            return(
            <div>
                <p>姓名：{store.name}</p>
                <p>出处：{store.from}</p>
            </div>
        )
     }
}
    </Consumer>
)
}
}
function TooBar(){
    return(
        <div>
            <Info></Info>
        </div>
    )
}
export default class Composition extends Component {
    render() {
        return (
            <div>
                <Provider value={store}>
                    <TooBar></TooBar>
                </Provider>
            </div>
        )
    }
}

猜你喜欢