React三大属性详解

React三大属性

props

• 组件是封闭的，接收外部数据应该通过props来实现
• 函数组件通过参数props来接收数据，props是一个对象； 类组件通过this.props接收数据。
• 传递数据：在组件标签上添加属性

函数组件

const Hello = (props) => {
   
    console.log(props);
    return (
        <div>props:{
   props.name}</div>
    )
}
ReactDOM.render(<Hello name="mimi" />, document.getElementById('root'))

类组件

class App extends React.Component {
   
    render() {
   
        console.log(this.props);
        return (
            <div>
                props: {
   this.props.name}
            </div>
        )
    }
}
ReactDOM.render(<App name="mimi" />, document.getElementById('root'))

在继承类的构造函数中必须调用super函数，super代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数，否则会报错。但是super函数内的this指向的是当前类的实例。

      构造器是否接受 props，是否传递给 super，取决于是否希望在构造器中通过 this访问props。

• 当构造器中接收了