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'))

3.父子组件传值

3.1 父组件向子组件传值

3.2 子组件向父组件传值

父组件

import React, { Component } from 'react';
import Child from './components/child';

// 子组件给父组件传值参数
class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            msg: "HI from Parent"
        }
    }

    changeIt (str) {
        alert(str)
        this.setState({
            msg: str
        })
    }

    render () {
        return (
            <div className="APP">
                <h1>{this.state.msg}</h1>
                <Child myfun={this.changeIt.bind(this)} />
                {/* 把函数当一个 props传递给子组件 绑定函数执行的上下文this 为当前组件 */}
            </div>
        );
    }
}

export default App;

子组件

import React, { Component } from 'react';

class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render () {
        return (
            <div className="child">
                <button onClick={() => { this.props.myfun("来自 child") }}>传递msg</button>
            </div>
        );
    }
}

export default Child;

表单的双向绑定

 <input type="text" value={this.state.value} onInput={e => { this.setState({ current: e.target.value }) }} /> <button>添加</button>
{/* 表单的双向绑定 value 绑定，事件绑定 */}

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 (
            <a href="http://www.baidu.com" onClick={this.handleClick}>百度</a>
        )
    }
}

//渲染react元素
ReactDOM.render(<App />, 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