React组件

一、React组件

函数组件

// 函数组件
// 组件的名称必须首字母大写
// 函数组件必须有返回值 如果不需要渲染任何内容，则返回 null
function HelloFn () {return <div>这是我的第一个函数组件!</div>
}// 定义类组件
function App () {return (<div className="App">{/* 渲染函数组件 */}<HelloFn /><HelloFn></HelloFn></div>)
}
export default App

类组件

// 引入React
import React from 'react'// 类组件
// 使用 ES6 的 class 创建的组件，叫做类（class）组件
// 类名称也必须以大写字母开头
// 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
// 类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构
class HelloC extends React.Component {render () {return <div>这是我的第一个类组件!</div>}
}function App () {return (<div className="App">{/* 渲染类组件 */}<HelloC /><HelloC></HelloC></div>)
}
export default App

二、组件的事件绑定

// 类组件引入React
import React from 'react'// 函数组件
// react事件采用驼峰命名法
function Hello() {const clickHandler = (e) => { // 获取事件对象e只需要在 事件的回调函数中 补充一个形参e即可拿到console.log(e, 66666)}return <div onClick={clickHandler}>hello</div>
}// 类组件
class HelloComponent extends React.Component{// 事件回调函数 (标准写法 可以避免this指向问题) ！！！！！！// 回调函数中的this指向是当前的组件实例对象clickHandler = () => {// 这里的this指向的是正确的当前的组件实例对象   推荐这么写！！！！！！console.log(this)}clickHandler1 () {// 这里的this 不指向当前的组件实例对象而指向undefined 存在this丢失问题console.log(this)}render () {return <div onClick={this.clickHandler} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div>}
}function App () {return (<div className="App"><Hello/><Hello></Hello><HelloComponent/><HelloComponent></HelloComponent></div>)
}export default App

三、组件事件传参

// 类组件引入React
import React from 'react'// 函数组件
// 传递自定义参数
function Hello() {const clickHandler = (e, msg) => {// e.preventDefault() // 阻止事件的默认行为console.log(66666, e, msg)}return (<div onClick={(e) => clickHandler(e, 'mua我爱你')}>{/* <a href='https://www.baidu.com'>百度</a> */}这是函数组件</div>)
}// 类组件
class HelloComponent extends React.Component{// 事件回调函数 (标准写法 可以避免this指向问题)// 回调函数中的this指向是当前的组件实例对象clickHandler = (e, num) => {console.log(this, e, num)}render () {return (<><button onClick={(e) => this.clickHandler(e, '123')}>click me</button>{/* <div onClick={this.clickHandler} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div> */}</>)}
}function App () {return (<div className="App"><Hello/><Hello></Hello><HelloComponent/><HelloComponent></HelloComponent></div>)
}export default App// event 是React封装的， 可以看到  __proto__.constructor是SyntheticEvent， 模拟出来DOm事件所有能力
// event.nativeEvent是原生事件对象, 原生的打印出来是MouseEvent
// 和dom事件不一样，和vue也不一样
// React16绑定到document, React17事件绑定到root组件(有利于多个React版本并存，例如微前端)

四、组件状态

在React hook出来之前，函数式组件是没有自己的状态的，所以我们统一通过类组件来讲解

不要直接修改state中的值，必须通过setState方法进行修改

// 类组件引入React
import React from 'react'// 组件状态
// 不要直接修改state中的值，必须通过setState方法进行修改 
class TestComponent extends React.Component{// 定义组件状态state = {name: 'zm',count: 0}setCount = () => {this.setState({count: this.state.count + 1,name: 'zzzz'})}render () {// 使用状态return (<div>this is TestComponent, name为: {this.state.name}, count: {this.state.count}<button onClick={this.setCount}>click++</button></div>)}
}function App () {return (<div className="App"><TestComponent/></div>)
}export default App

五、this指向问题

// 类组件引入React
import React from 'react'// 类组件 this有问题的写法// 1.constructor中通过bind强行绑定this// class HelloComponent extends React.Component{
//   constructor () {
//     super()
//     // 使用bind强行修改this指向
//     // 相当于在类组件初始化的阶段，就可以把回调函数的this修改到
//     // 永远指向当前组件的实例对象
//     this.clickHandler = this.clickHandler.bind(this)
//   }
//   clickHandler () {
//     console.log(this) // 如果没有上面的bind 打印就是undefined
//   }
//   render () {
//     return <div onClick={this.clickHandler} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div>
//   }
// }// 2.箭头函数写法// class HelloComponent extends React.Component{
//   clickHandler () {
//     console.log(this)
//   }
//   render () {
//     // render函数的this已经被react做了修改
//     // 这里的this就是指向当前组件实例
//     console.log('父函数中的this指向为：', this)
//     // 通过箭头函数的写法 直接沿用父函数的this指向也ok
//     return <div onClick={() => this.clickHandler()} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div>
//   }
// }// 3. class field写法  最推荐 !!!!!!!!!!!!!!!!!!!!!
class HelloComponent extends React.Component{clickHandler = () => {console.log(this)}render () {return <div onClick={this.clickHandler} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div>}
}function App () {return (<div className="App"><HelloComponent/></div>)
}export default App

六、受控表单组件

// 类组件引入React
import React from 'react'class InputComponent extends React.Component{state = {message: 'zm66666'}changeHandler = (e) => {this.setState({message: e.target.value})}render () {// 使用状态return (<div>{/* 绑定value 绑定事件 */}<input type='text' value={this.state.message} onChange={this.changeHandler} /></div>)}
}function App () {return (<div className="App"><InputComponent/></div>)
}export default App// 受控组件：input框自己的状态被React组件状态控制// 1. 在组件的state中声明一个组件的状态数据
// 2. 将状态数据设置为input标签元素的value属性的值
// 3. 为input添加change事件，在事件处理程序中，通过事件对象e获取到当前文本框的值（即用户当前输入的值）
// 4. 调用setState方法，将文本框的值作为state状态的最新值

七、非受控表单组件

// 类组件引入React createRef
import React, { createRef } from 'react'class InputComponent extends React.Component{// 使用createRef产生一个存放dom的对象容器msgRef = createRef()changeHandler = () => {console.log(this.msgRef.current)console.log(this.msgRef.current.value)}render () {// 使用状态return (<div>{/* ref绑定 获取真实dom */}<input ref={this.msgRef} /><button onClick={this.changeHandler}>click</button></div>)}
}function App () {return (<div className="App"><InputComponent/></div>)
}export default App// 非受控组件： 
// 通过手动操作dom的方式获取文本框的值
// 文本框的状态不受react组件的state中的状态控制
// 直接通过原生dom获取输入框的值// 1.导入createRef 函数
// 2.调用createRef函数，创建一个ref对象，存储到名为msgRef的实例属性中
// 3.为input添加ref属性，值为msgRef
// 4.在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的dom元素，
// 而其中msgRef.current.value拿到的就是文本框的值