组件分为两种： 函数式组件和类组件。
1)函数式组件是一个接收props参数的纯函数。函数的返回值只受props值影响，props相同，返回值相同。
2）??必须返回一个React元素或者null，否则会报错
1）继承React.Component的类，里面??必须调用一个render()方法,必须返回React元素，否则报错。
2）通过this.props[name]访问属性对象
1）首字母大写 （非大写会被转译成普通标签的形式，大写会被转译成Class）
2）返回React元素,可以理解成React.CreateElement()生成的js对象。
3）只能有一个顶级标签。如果有多个同级标签，需要用（<></>）或者(<React.Fragment></React.Fragment>)包含。
这两种都是空标签，不会生成实际的DOM结构。
4）两种组件的props都不能被改写，只能读取（来自“parent”,不能修改）
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 } }
对于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