[JavaScript知识库]React组件-3

1.组件介绍

2.React 组件的两种创建方式

2.1 使用函数创建组件

函数组件：使用Js的函数（或箭头函数）创建的组件
约定1：函数名称必须以大写字母开头，React 据此区分组件和普通的React元素
约定2：函数组件必须有返回值，表示该组件的结构
如果返回值为null,表示不渲染任何内容

function Hello () {
    return (
        <div>这是我第一个函数组件！</div>
    )
}

//箭头函数
const Hello = () => <div>这是我第一个函数组件！</div>

//渲染react元素
ReactDOM.render(<Hello />, document.getElementById('root'))

2.2 使用类创建组件

类组件：使用ES6的class创建的组件
约定1：类名称也必须以大写字母开头
约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
约定3：类组件必须提供render()方法
约定4：render()方法必须有返回值，表示该组件的结构

//创建组件
class Hello extends React.Component{
    render(){
        return <div>这是我第一个组件类！</div>
    }
}
ReactDOM.render(<Hello />, document.getElementById('root'))

2.3 抽离为独立的JS文件

思考：项目中 的组件多了之后，该如何组织这些组件呢
选择一：将所以组件放到同一个JS文件中
选择二：将每个组件放到单独的JS文件中
组件作为一个独立的个体，一般都会放到一个单独的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>这是我第一个抽离到js文件中的组件</div>
        )
    }
}
//导出组件
export default Hello

index.js
//导入组件
import Hello from './js/Hello'

//渲染react元素
ReactDOM.render(<Hello />, document.getElementById('root'))

3.React 事件处理

3.1事件绑定

React 事件绑定语法与DOM事件语法类似
语法：on+事件名称=（事件处理程序），比如onClick={()={}}
注意：React 事件采用驼峰命名法

//基于Class组件绑定事件
mport React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    //事件处理程序
    handleClick () {
        console.log('单机事件触发了')
    }
    render () {
        return (
            <button onClick={this.handleClick}>点我，点我</button>
        )
    }
}

//渲染react元素
ReactDOM.render(<App />, document.getElementById('root'))

//函数组件绑定事件
import React from 'react';
import ReactDOM from 'react-dom';

function App () {
    function handleClick () {
        console.log("单击事件触发了")
    }
    return (
        <button onClick={handleClick}>点我，点我</button>
    )
}

//渲染react元素
ReactDOM.render(<App />, document.getElementById('root'))

3.2事件对象

可以通过事件处理程序的参数获取到事件对象
React中的事件对象叫做：合成事件（对象）
合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题
import React from ‘react’;
import ReactDOM from ‘react-dom’;

/**

• 事件对象
  */
  class App extends React.Component {
  handleClick (e) {
  //阻止浏览器的默认行为
  e.preventDefault()

   console.log("a标签的单击事件")
  

  }
  render () {
  return (
  百度
  )
  }
  }

//渲染react元素
ReactDOM.render(, document.getElementById(‘root’))

4.有状态组件和无状态组件

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

5.组件中的state 和 setState

5.1 state的基本使用

状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
state 的值是对象，表示一个组件中可以有多个数据
获取状态：this.state vb

import React from 'react';
import ReactDOM from 'react-dom';

/**
 * state的基本使用
 */
class App extends React.Component {
    // constructor() {
    //     super()
    //     //初始化state
    //     this.state = {
    //         count: 0
    //     }
    // }

    //简化语法 初始化state
    state = {
        count: 0
    }

    render () {
        return (
            <div>
                <h1>计数器：{this.state.count}</h1>
            </div>
        )
    }
}

//渲染react元素
ReactDOM.render(<App />, document.getElementById('root'))

5.2 setState()修改状态

状态是可以改变的
语法：this.setState({要修改的数据})
注意：不要直接修改state中的值，这是错误的！！
setState() 作用：1.修改state 2.更新UI
思想：数据驱动视图

import React from 'react';
import ReactDOM from 'react-dom';
/**
 * state的基本使用
 */
class App extends React.Component {
    //简化语法 初始化state
    state = {
        count: 0
    }
    render () {
        return (
            <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={() => {
                    this.setState({
                        count: this.state.count + 1
                    })
                }}>+1</button>
            </div>
        )
    }
}
//渲染react元素
ReactDOM.render(<App />, document.getElementById('root'))

从JSX中抽离事件处理程序
1.JSX中掺杂过多JS逻辑代码，会显得非常的混乱
2.推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰

6.事件绑定this 指向

6.1箭头函数

利用箭头函数自身不绑定this特点
render()方法中的this为组件实例，可以获取到setState()

class App extends React.Component {
    //简化语法 初始化state
    onIncrement(){
        this.setState({.....})
    }
    render () {
        //箭头函数中的this指向外部环境，此处为：render()方法
        return (
           <button onClick={() => this.onIncrement()}
        )
    }
}

2.Function.prototype.bind()

利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

import React from 'react';
import ReactDOM from 'react-dom';

/**
 * state的基本使用
 */
class Hello extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
        this.onIncrement = this.onIncrement.bind(this)
    }

    //事件处理程序
    onIncrement () {
        console.log("事件处理程序中的this", this)
        this.setState({
            count: this.state.count + 1
        })
    }

    render () {
        return (
            <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }
}
//渲染react元素
ReactDOM.render(<Hello />, document.getElementById('root'))

3.class 的实例方法

利用箭头函数形式的class实例方法
注意：该语法是实验性语法，但是，由于babe的存在可以直接使用

import React from 'react';
import ReactDOM from 'react-dom';

/**
 * state的基本使用
 */
class Hello extends React.Component {
    state = {
        count: 0
    }
    onIncrement = () => {
        console.log("事件处理程序中的this", this)
        this.setState({
            count: this.state.count + 1
        })
    }
    render () {
        return (
            <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }
}
//渲染react元素
ReactDOM.render(<Hello />, document.getElementById('root'))

总结

1.推荐：使用class的实例方法

2.箭头函数

<div>
    <h1>计数器：{this.state.count}</h1>
    <button onClick={() => this.onIncrement()}>+1</button>
 </div>

3.bind