react学习

什么是react

react是一个用于构建用户界面的js库
react主要用来写html页面，或构建web应用
如果从MVC角度来看，React仅仅是视图层（V），也就是只负责视图的渲染，并非提供了完整的M和C功能

react特点

1.声明式
你只需描述ui{html}看起来是什么样子的，就跟写html一样。react只负责渲染ui，并在数据变化时更新ui

const jsx=<div class="msg">
	<h1>hello react！动态变化的数据：{count}</h1>
</div>

2.基于组件
组件时react重要的部分，组件表示页面中的部分内容。组合、复用多个组件可以实现完整的页面功能
3.学习一次，多次使用
·使用react可以开发web应用
·使用react可以开发移动端原生应用（react-native）
·使用react可以开发VR（虚拟现实）应用（react 360）
。。。。。。

基本使用

安装：npm i react react-dom
·react包是核心，提供创建元素、组件等功能
·react-dom包提供DOM相关功能

react脚手架意义

1.脚手架是开发现代web应用的必备
2，充分利用webpack、babel、eslint等工具辅助项目开发
3，零配置，无需手动配置繁琐的工具即可使用
4，关注业务，而不是工具配置

使用react脚手架初始化项目

1、初始化项目命令 npx create-react-app my_app(项目名)
2、启动项目：在项目根目录命令行输入npm start

在脚手架中使用react

JSX的基本使用

jsx是javaScrit XML的简写，表示在js代码中写xml（html）格式的代码。语法更加的简单直观

jsx注意点：
1、元素的属性名使用驼峰命名法
2、特殊属性名：class->className, for->htmlfor, tabindex->tabIndex
3、没有子节点的react元素可用/>结束
4、推荐:使用小括号包裹jsx，从而避免js中的自动插入分号陷阱

const dv=(
	<div>Hello</div>
)

jsx中嵌入js表达式：

jsx条件渲染：

jsx列表渲染：

创建组件的两种方式：

1、使用函数创建组件

2、使用类创建组件

3、抽离为独立js文件

事件绑定

有状态组件和无状态组件

state的基本使用(设置状态):

setState基本使用（修改状态）:

解决事件绑定中this指向问题

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

2、Function.prototype.bind()
·利用es5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

3、class实例方法（最重要）
·利用箭头函数形式的class实例方法
·注意：改语法是实验性语法，但是由于babel的存在可以直接使用

表单处理

受控组件概念：

受控组件使用步骤：

文本、富文本和下拉框的受控组件步骤都一样，且绑定值和变化时的调用方法也一样（如上）。
而复选框的绑定数据的不是value属性而是checked（value->checked即可）

优化：若事件处理函数中同时有文本框、下拉框和富文本框、复选框，每个元素都要使用专门的函数处理变化后的值，代码繁琐。如何把他们所有函数合并为一个同时保证各自绑定的数据不互相影响？？

非受控组件

·说明：借助于ref，使用原生的DOM方式获取表单元素
·ref的作用：获取DOM或组件
使用步骤：

组件间通信

prop特点：
1、可以传递任意类型

2、prop属性为只读类型，不可修改
3、使用类组件时，如果写了构造函数，应该将props传递给super（），否则，无法在构造函数和中国获取到props

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

import './index.css'
/* 
  props
*/

// 父组件
class Parent extends React.Component {
  state = {
    parentMsg: ''
  }

  // 提供回调函数，用来接收数据
  getChildMsg = data => {
    console.log('接收到子组件中传递过来的数据：', data)

    this.setState({
      parentMsg: data
    })
  }

  render() {
    return (
      <div className="parent">
        父组件：{this.state.parentMsg}
        <Child getMsg={this.getChildMsg} />
      </div>
    )
  }
}

// 子组件
class Child extends React.Component {
  state = {
    msg: '刷抖音'
  }

  handleClick = () => {
    // 子组件调用父组件中传递过来的回调函数
    this.props.getMsg(this.state.msg)
  }

  render() {
    return (
      <div className="child">
        子组件：{' '}
        <button onClick={this.handleClick}>点我，给父组件传递数据</button>
      </div>
    )
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'))

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

/* 
  兄弟组件通讯
*/

// 父组件
class Counter extends React.Component {
  // 提供共享状态
  state = {
    count: 0
  }

  // 提供修改状态的方法
  onIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <Child1 count={this.state.count} />
        <Child2 onIncrement={this.onIncrement} />
      </div>
    )
  }
}

const Child1 = props => {
  return <h1>计数器：{props.count}</h1>
}

const Child2 = props => {
  return <button onClick={() => props.onIncrement()}>+1</button>
}

ReactDOM.render(<Counter />, document.getElementById('root'))

Context

当组件之间存在多级嵌套时若使用props一级级的往下传数据会十分复杂。可使用context实现组件间通向。
Context提供了两个组件：Provide和Consumer
Provider组件：用来提供数据
Consumer组件：用来消费数据

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

import './index.css'
/* 
  Context
*/

// 创建context得到两个组件
const { Provider, Consumer } = React.createContext()

class App extends React.Component {
  render() {
    return (
      <Provider value="pink">
        <div className="app">
          <Node />
        </div>
      </Provider>
    )
  }
}

const Node = props => {
  return (
    <div className="node">
      <SubNode />
    </div>
  )
}

const SubNode = props => {
  return (
    <div className="subnode">
      <Child />
    </div>
  )
}

const Child = props => {
  return (
    <div className="child">
      <Consumer>{data => <span>我是子节点 -- {data}</span>}</Consumer>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Props深入

1、children属性（类似于vue中的slot）：
·children属性：表示组件标签的子节点，当组件标签中有子节点时props就有该属性
·children属性和普通的props一样，值可以是任意值（文本、react元素、组件、函数）

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

/* 
  children 属性
*/

const App = props => {
  console.log(props)
  props.children()

  return (
    <div>
      <h1>组件标签的子节点：</h1>
      {/* {props.children} */}
    </div>
  )
}

ReactDOM.render(
  <App>{() => console.log('这是一个函数子节点')}</App>,
  document.getElementById('root')
)

// children为：jsx或组件
// const Test = () => <button>我是button组件</button>
// const App = props => {
//   console.log(props)
//   return (
//     <div>
//       <h1>组件标签的子节点：</h1>
//       {props.children}
//     </div>
//   )
// }

// ReactDOM.render(
//   <App>
//     {/* <p>我是子节点，是一个p标签</p> */}
//     <Test />
//   </App>,
//   document.getElementById('root')
// )

// children为：文本节点
/* const App = props => {
  console.log(props)
  return (
    <div>
      <h1>组件标签的子节点：</h1>
      {props.children}
    </div>
  )
}

ReactDOM.render(<App>我是子节点</App>, document.getElementById('root')) */

2、props校验

3、props默认值

组件生命周期

·只有类组件才有生命周期
生命周期三个阶段：创建时（挂载阶段）、更新时、卸载时

更新阶段执行时机：setState(),forceUpdate(),组件接收到新的props

render-props和高阶组件

如何复用组件的state和组件逻辑状态（操作state的方法）：使用render props模式或者高阶组件（HOC）
注意：这两种方法不是新的api。而是利用react自身特点的编码技巧，演化而成的固定模式（写法）

高阶组件HOC

目的：实现逻辑复用
高阶组件是一个函数，接收要包装的组件，返回增强后的组件
高阶组件内部创建一个类组件，在这个组件中提供了复用的状态逻辑代码，通过props将复用的状态传递给被包装的组件WrappedComponent

。。。待完善