React组件以及组件的两大属性State&props

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_41847321/article/details/102496530

React组件

含义：html、css、js代码的集合
1.工厂函数组件（简单组件）

function Simple(){
    return <h1>简单组件</h1>
}
ReactDOM.render(<Simple/>,document.getElementById('app'));

2.ES6类组件（复杂组件）

class Complex extends React.Component{
    render(){
        return(
            <h1>复杂组件<h1/>
        )
    }
}
ReactDOM.render(<Complex/>,document.getElementById('root'))

注意点：
1.自定义组件首字母必须大写
2.return中只能有一个根标签
3.每个标签必须有闭合标签
##组件两大属性 State&Prop

State

class Complex extends React.Component{
    constructor(props){
        super(props)
        this.setState({
            msg:"hhhhhh"
        })
    }
    render(){
        // ES6语法
        // const 变量的值只读不可修改
        const {msg} = this.state
        return(
            <h1>{msg}<h1/>
        )
    }
}

1.state中值是只读的,修改state中值需要使用setState({})
2.jsx回调中this指向是undefined,修改this指向方法
方式一 直接在绑定事件时bind

class Complex extends React.Component{
    click(){
            // do something
        }
    render(){
        return(
            <h1 onClick={this.click.bind(this)}>复杂组件<h1/>
        )
    }
}

方式二 在构造函数中bind

class Complex extends React.Component{
    constructor(props){
        super(props)
        this.click:this.click.bind(this)
    }
    click(){
            // do something
        }
    render(){
        return(
            <h1 onClick={this.click}>复杂组件<h1/>
        )
    }
}

方式三 箭头函数

class Complex extends React.Component{
    click=()=>{
            // do something
    }
    render(){
        return(
            <h1 onClick={this.click}>复杂组件<h1/>
        )
    }
}

调用setState不一定会重新渲染,与生命周期有关

props

props外部传入值：以属性方式,以对象整体方式

class Complex extends React.Compnent{
    constructor(props){
        super(props)
    }
    render(){
        obj = this.props
        return 
        // something
    }
}
let person = {
    name:"sss",
    age:17
}
//整个对象的形式
ReactDOM.render(<Complex {...person}/>,document.getElementById('root'))
// 单个属性
ReactDOM.render(<Complex name={person.name}/>,document.getElementById('root'))

类型检验

// 引入文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>

// 类型检验
Complex.propTypes={
        name:PropTypes.string.isRequired
    }
// 设置默认值
Complex.defaultProps={
        sex:"男",
        age:"18"
    }