React框架之组件-01

一、React组件介绍

组件是React的一等公民，使用React就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用、独立、可组合

二、React组件的两种创建方式

2.1、使用函数创建组件

函数组件：使用JS的函数(或箭头函数)创建的组件
函数组件必须有返回值
组件名称必须以大写字母开头，React据此区分组件和普通的React元素
const root = ReactDOM.createRoot(document.getElementById('root'));
function Hello() {
    return (
        <div>函数组件</div>
    )
}
root.render(
    <Hello></Hello>
)

2.2、使用类创建组件

类组件：使用ES6的class创建的组件
1 类名称也必须以大写字母开头
2 类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
3 类组件必须提供render()方法
4 render()方法必须有返回值，表示该组件的结构
const root = ReactDOM.createRoot(document.getElementById('root'));
class Hello extends React.Component {
    render() {
        return <div>hello world</div>
    }
}
root.render(
    <Hello></Hello>
)

2.3、抽离为独立的JS文件

1 创建Hello.js
2 在Hello.js中导入React
3 创建组件(函数或类)
4 在Hello.js中导出该组件
5 在index.js中导入Hello
6 渲染组件
// Hello.js
import React from 'react'
class Hello extends React.Component {
    render() {
        return <div>hello world</div>
    }
}
// 导出Hello组件
export default Hello
// index.js
import Hello from './Hello'
// 渲染导入的Hello组件
ReactDOM.render(<Hello/>,root)

三、React事件处理

3.1、事件绑定

React事件绑定语法与DOM事件语法相似
语法：on+事件名称={事件处理程序}，比如：onClick={()=>{}}
注意：React事件采用驼峰命名法
类组件：
class Hello extends React.Component {
    handleClick() {
        alert('单击事件触犯了')
    }

    render() {
        return <button onClick={this.handleClick}>点我触发事件</button>
    }
}
函数组件：
function Hello() {
    function handleClick() {
        alert('单击事件触犯了')
    }
    return (
        <button onClick={handleClick}>点我触发事件</button>
    )
}

3.2、事件对象

可以通过事件处理程序的参数获取到事件对象
React中的事件对象叫做：合成事件(对象)
合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题
function handleClick(e) {
    e.preventDefault()
    console.log('事件对象',e)
}
<a onClick={handleClick}>点我触发事件</a>

四、有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件
状态(state)即数据
函数组件没有自己的状态，只负责数据展示(静)
类组件有自己的状态，负责更新UI，让页面动起来

五、组件中的state和setState

5.1、state的基本使用

状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中可以有多个数据
class Hello extends React.Component {
    // constructor() {
    //     super();
    //     // 初始化state
    //     this.state = {
    //         count: 0
    //     }
    // }
    // 简化语法初始化state
    state = {count: 0}
    render() {
        return (
            <h1>有状态组件：{this.state.count}</h1>
        )
    }
}

5.2、setState()修改状态

状态是可变的
语法：this.setState({要修改的数据})
注意：不要直接修改state中的值，这是错误的
setState()作用：修改state、更新UI
class Hello extends React.Component {
    state = {count: 0}
    render() {
        return (
            <div>
                <h1>有状态组件：{this.state.count}</h1>
                <button onClick={() => {
                    this.setState({count: this.state.count + 1})
                }}>点我加1
                </button>
            </div>
        )
    }
}

六、事件绑定this指向

6.1、箭头函数

利用箭头函数自身不绑定this的特点
class Hello extends React.Component {
    onIncrement() {
        this.setState({...})
    }
    render() {
        // 箭头函数中的this指向外部环境，此处为：render()方法
        return(
            <button onClick={()=>this.onIncrement()></button>
        )
    }
}

6.2、Function.prototype.bind()

利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起
class Hello extends React.Component {
    constructor() {
        super()
        this.onIncrement = this.onIncrement.bind(this)
    }
    // ...省略onIncrement
    render() {
        return (<button onClick={this.onIncrement}></button>)
    }
}

6.3、class的实例方法

利用箭头函数形式的class实例方法
class Hello extends React.Component {
    onIncrement = () => {
        this.setState({...})
    }
    render() {
        return (<button onClick={this.onIncrement}></button>)
    }
}

七、表单处理

7.1、受控组件

HTML中的表单元素是可以输入的，也就是有自己的可变状态
而，React中可变状态通常保存在state中，并且只能通过setState()方法来修改
React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值
受控组件：其值受到React控制的表单元素

7.2、受控组件使用

1 在state中添加一个状态，作为表单元素的value值(控制表单元素值的来源)
2 给表单元素绑定change事件，将表单元素的值设置为state的值(控制表单元素值的变化)
class App extends React.Component {
    state = {txt: ''}
    handleChange = e => {
        this.setState({
            txt: e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.txt} onChange={this.handleChange}/>
            </div>
        )
    }
}

7.3、非受控组件

借助于ref，使用原生DOM方式来获取表单元素值
ref的作用：获取DOM或组件
使用步骤：
1 调用React.createRef()方法创建一个ref对象
constructor(){
    super()
    this.extRef = React.createRef
}
2 将创建好的ref对象添加到文本框中
<input type="text" ref={this.txtRef} />
3 通过ref对象获取到文本框的值
console.log(this.txtRef.current.value)

八、React组件基础

1 组件的两种创建方式：函数组件和类组件
2 无状态(函数)组件，负责静态结构展示
3 有状态(类)组件，负责更新UI，让页面动起来
4 绑定事件注意this指向问题
5 推荐使用受控组件来处理表单
6 完全利用JS语言的能力创建组件，这是React的思想

九、组件通讯介绍

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据，在组件化过程中，我们将一个完整的功能。
拆分成多个组件，以更好的完成整个应用的功能，而在这个过程中，多个组件之间不可避免的要共享某些数据。
为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通信。

十、组件的props

组件是封闭的，要接收外部数据应该通过props来实现
props的作用：接收传递给组件的数据
传递数据：给组件标签添加属性
接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据
<Hello name="zero" />
function Hello(props){
    console.log(props)
    return (<div>接收到数据：{props.name}</div>)
}
特点：
    1 可以给组件传递任意类型的数据
    2 props是只读的对象，只能读取属性的值，无法修改对象
    3 注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到props

十一、组件通信的三种方式

11.1、父组件传递数据给子组件

1 父组件提供要传递的state数据
2 给子组件标签添加属性，值为state中的数据
3 子组件中通过props接收父组件中传递的数据
class Parent extends React.Component {
    state = {lastName:'zero'}
    render(){
        return(<div>传递数据给子组件：<Child name={this.state.lastName}/></div>)
    }
}
function Child(props){
    return <div>子组件接收到数据：{props.name}</div>
}

11.2、子组件传递数据给父组件

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
1 父组件提供一个回调函数(用于接收数据)
2 将该函数作为属性的值，传递给子组件
3 子组件通过props调用回调函数
4 将子组件的数据作为参数传递给回调函数
class Parent extends React.Component {
    getChildMsg = (msg) => {
        console.log('接收到子组件数据',msg)
    }
    render(){
        return (<div>子组件：<Child getMsg={this.getChildMsg} /></div>)
    }
}
class Child extends React.Component {
    state = {childMsg:'React'}
    handleClick = ()=>{
        this.props.getMsg(this.state.childMsg)
    }
    return (<button onClick={this.handleClick}>点我，给父组件传递数据</button>)
}

11.3、兄弟组件

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
思想：状态提升
公共父组件职责：提供共享状态、提供操作共享状态的方法
要通讯的子组件只需通过props接收状态或操作状态的方法