学习使用React笔记

学习React的基本方法笔记

全局安装

npm i react-react-app -g

初始化项目

npx create-react-app 项目名称

项目启动

yarn start

函数组件的简化

const Child = () => (
div
   p标题p
    p靓仔p
div
)
渲染
ReactDOM.render( Child name="马冬梅" , document.getElementById('root') )

处理this

三种方式
写法1 : 使用bind
constructor() {
super()
this.fn1 = this.fn1.bind(this)
}

写法2 :
onClick={ this.fn1.bind(this) }
- 方式2 : 属性初始化语法
onClick={ this.fn2 }
fn2 = () => {
....
}

- 方式3 : 箭头函数
onClick={ () => this.fn3() }

fn3(){}

受控组件和非受控组件

非受控组件:  没有受到控住的组件
            通过ref 收集数据
            iptRef = React.createref()
            input ref={this.iptRef}
            this.iptRef.current.value

受控组件:   受到控住的组件
        添加一个value属性
        通过value + onChange
        value: M ==> V
        inChange: V ==> M

My React Notes