React的基础使用

React是一个js库

原理

• React基于虚拟dom,通过js创建虚拟dom，虚拟dom转换真实dom并挂载到页面
  没有在任何一个项目中直接使用标签，而是通过js创建标签

• 创建虚拟dom :
  react.createElement（）
  jsx => 遇到 < > 解析成虚拟dom ; 遇到 { } 解析成js

• react 提供了一个挂载真实dom节点在页面的方法 ：
  虚拟dom转换真实dom并挂载到页面 reactDom.render(要挂载的真实dom节点，挂载的容器id，回调函数)

搭建React项目

1.全局安装脚手架

npm i create-react-app -g

2.创建一个react项目

create-react-app XXX

3.cd进项目进行

cd 项目

4.释放 【(不可逆的)(在没有破坏项目完整性之前去释放)】

npm run eject

5.启动项目【可以在package.json/scripts中自定义指令】

npm run build / npm start

组件

组件的创建【两种】

第一种 ：函数式

特点：

function App(props){
    //无this指向，内部this为 undefined
    //无状态,没有state
	//内部访问props通过参数，props是函数形参
	//没有生命周期
	//有返回值
    return <div>i am app</div>
}

第二种 ：类声明

特点：

class App extends Component{
    // 内部this指向我们的组件实例 
    // 有状态,有state
    // 有生命周期
    // 内部访问props通过this 
    
    state={
        txt:'i am app'
    }

    render(){
        return <div>{txt}</div>
    }
}
export default App

生命周期 ：

区别：

性能方面：
函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可
函数组件没有this,没有生命周期，没有状态state,
类组件有this,有生命周期，有状态state。

react的组件关系及组件通信

父子通信 使用props （传string number object）

子父 回调函数 （子组件调用父组件的函数，并通过参数传值）

react受控组件（input表单元素和onchange事件的一个结合）

定义：受状态state控制的表单组件

区分value defaultValue 用法

children用法

用于组件传递标签节点,子组件通过this.props.children获取

获取真实dom节点 ref&refs

ref用来命名节点
this.refs 获取节点

给组件设置默认props

组件.defaultProps = {

定义的变量key:变量的默认值

}

react 跨级传值

组件关系

父子 属性-props接收
子父 回调函数
同级 redux
跨级 redux （createContext）

什么是跨级传值 ？ 嵌套关系的组件想要进行变量或者方法的传递

react中跨级传值使用 createContext

import React, { Component ,createContext} from 'react';
const {Provider,Consumer} = createContext();

//变量传递的一方 使用Provider
class GrandFather extends Component{
    state={
        name:'顺溜'
    }

    setName = name => this.setState({name})
    
    render(){
        return <Provider value={{name:this.state.name, setName:this.setName }}>
            <div className="grandFather">
                爷爷
                <TwoFather></TwoFather>
            </div>
        </Provider> 
    }
}

//接受变量的一方 使用Consumer
class Son extends Component{
    
    state={
        sonName:''
    }
    render(){
        const {sonName} = this.state
        return <Consumer>
               {
                   store =>{
                        return  <div className="son">
                        我的名字叫{store.name}
                        <input type="text" value={sonName} onChange={ev =>this.setState({sonName:ev.target.value})}/>
                        <button onClick={()=>store.setName(sonName)}>改名字</button>
                    </div>
                   }
               }
        </Consumer>
    }
}

react 合成事件

在react中所有元素的事件并不是元素本身去触发，而是通过事件冒泡到document身上

react中的事件类型