React学习记录一：组件_ref_事件

一、语法规则

1. 定义虚拟DOM时，标签中写JS表达式要用 {} 包起来

   <div id={myId}></div>

2. 标签的类名要使用 className 进行定义

   <div className="title"></div>

3. 标签的内联样式要使用对象的形式

   <div style={{width:'300px',fontSize:'18px'}}></div>

4. 要有一个根标签
5. 所有的标签必须闭合
6. html标签首字母是小写、组件的标签首字母是大写

二、组件

1、函数组件

const MyCom = function(){
    return (
        <div>这是一个函数组件</div>
    )
}
ReactDOM.render(<MyCom />,document.getElementById('root'))

2、类式组件

(1)、初始化一个类式组件

class MyCom extends React.Component{
    constructor(props){
        super(props)
        this.state = {msg:'初始化'}
    }
    
    render(){
        const {msg} = this.state
        const {parentMsg} = this.props
        return (
            <div>
                <p>接收的数据:{parentMsg}</p>
                <p>在自身的数据:{msg}</p>
            </div>
        )
    }
}
const obj = {parentMsg:'批量传参方式'}
// ReactDOM.render(<MyCom parentMsg="传参"/>,document.getElementById('root'))
ReactDOM.render(<MyCom {...parentMsg} />,document.getElementById('root'))

(2)、对props传参进行限制

// 需要有 PropTypes对象，在 prop-types 中
class MyCom extends React.Component{
    constructor(props){
        super(props)
        this.state = {msg:'初始化'}
    }
    // 限制传参类型
    static propTypes = {
        // 首字母大写  PropTypes 
        parentMsg:PropTypes.string.isRequired,// 限制为 string类型 ，且必传
        fn:PropTypes.func,// 限制为function类型
    }
    // 传参的默认值
    static defaultProps = {
        fn:function(){
            console.log('默认的fn函数')   
        }
    }
    render(){
        const {msg} = this.state
        const {parentMsg} = this.props
        return (
            <div>
                <p>接收的数据:{parentMsg}</p>
                <p>在自身的数据:{msg}</p>
            </div>
        )
    }
}
const obj = {parentMsg:'批量传参方式'}
ReactDOM.render(<MyCom {...parentMsg} />,document.getElementById('root'))

三、使用ref的方式

1、 方式一 字符串形式。通过 this.refs[定义的ref名] 进行调用

<p ref="stringRef">通过字符串形式定义ref</p>

2、 方式二 回调函数形式。通过 this.fncRef 进行调用

① 此种回调函数在在初始化时执行一次，传递参数是DOM元素

② 更新的时候会执行两次，也就是render调用的时候会执行两次，第一次传参为null，第二次是DOM元素

<p ref={ele=>this.fncRef = ele}>通过回调函数形式定义ref</p> 

3、方式三 函数形式。定义 ref 为实例自身的函数 避免reander更新的时候重复调用

class MyCom extends React.Component{
    saveRef= (e) => {
        this.threeRef = e
    }
    render(){
        return <p ref={this.saveRef}>通过函数形式定义ref</p>
    }
}

4、方式四 React.createRef() 通过 this.reactRef.current可以得到DOM元素 推荐使用

 <p ref={this.reactRef = React.createRef()}>通过React.createRef()定义ref</p>

四、事件绑定

class MyCom extends React.Component{
    state = {
        person:{
            name:'ycl',
            height:180
        }
    }
    speack = (data)=>{
        console.log('我的名字是',data.name)
        console.log('我的身高是',data.height)
    }
    logData = ()=>{
        console.log('这是一个普通方法')
    }
    render(){
        const {person} = this.state
        return (
            <div>
                <button onClick={this.logData}>触发不需要传参的方法</button>
                <button onClick={()=>this.speack(person)}>触发speack方法</button>
            </div>
        )
    }
}

ReactDOM.render(<MyCom />,document.getElementById('root'))