React组件

1.React组件分类

组件分为两种： 函数式组件和类组件。

1.函数式组件

1)函数式组件是一个接收props参数的纯函数。纯函数要求传入的参数不能被修改，并且函数的返回值只受props值影响，只要props相同，返回值就相同。

2）❗️必须返回一个React元素或者null，否则会报错

2.类组件

1）继承React.Component的类，里面❗️必须调用一个render()方法,必须返回React元素，否则报错。

2）通过this.props[name]访问属性对象

3.函数式组件和类组件的共同点

1）首字母大写 （非大写会被转译成普通标签的形式，大写会被转译成Class）

2）返回React元素,可以理解成React.CreateElement()生成的js对象。

3）只能有一个顶级标签。如果有多个同级标签，需要用（<></>）或者(<React.Fragment></React.Fragment>)包含。

     这两种都是空标签，不会生成实际的DOM结构。

4）两种组件的props都不能被更改，只能读取（来自“parent”,不能修改）

4.函数式组件和类组件的不同点

1）class 组件是有状态state的组件；函数式组件没有状态。

2.React组件属性类型检查

react15.5以后，引入了'prop-types'库进行类型检查。❗️处于性能问题，只在开发模式下检查。

检查方式，函数式组件和类组件基本相同。通过给组件添加静态属性。

import React from 'react';
import ReactDOM from 'react-dom';
import propTypes from 'prop-types';

function App(props) {
    return <div>{props.myname}:{props.age}</div>
}
// class App extends React.Component{
//     render() {
//         return <div>{this.props.myname}: {this.props.age}</div>
//     }
// }
App.propTypes = {
    age: propTypes.number.isRequired,
    myname: function(props, propName, Component) { // 自定义校验方法
        if (props[propName] !== 'lyra') {
            throw new Error(`Invalid Prop ${propName}: Not equal to lyra`)
        }
    }
}
ReactDOM.render(<App myname="lyra" age={20} />, document.getElementById('root'));

❗️只有类组件可以使用static静态属性。（这个属性是个提案，浏览器不能识别。可以通过babel-transform-class-property插件转译）

class App extends React.Component{
    static propTypes = {
        name: propTypes.string.isRequired
    }
    render() {
        return null
    }
}

3.设置默认属性

对于isRequired的属性，如果大多数情况下的传参值是相同的，可以使用默认属性defaultProps。添加方式和propTypes相同。

import React from 'react';
import ReactDOM from 'react-dom';
import propTypes from 'prop-types';

class App extends React.Component{ 
    static defaultProps = {
        age: 20
    }
    render() {
        return <div>{this.props.myname}: {this.props.age}</div>
    }
}
App.propTypes = {
    age: propTypes.number.isRequired,
    myname: propTypes.string.isRequired
}
ReactDOM.render(<App myname="lyra" />, document.getElementById('root'));

 

转载于:https://www.cnblogs.com/lyraLee/p/11556954.html