React

React

React 版本 16.+

1.全局安装create-react-app 创建项目

全局安装脚手架

$ npm install -g create-react-app

如果不想全局安装，可以直接使用npx

$ npx create-react-app your-app 也可以实现相同的效果

创建一个项目

$ create-react-app your-app 注意命名方式

生成项目的目录结构如下：

├── README.md                           使用方法的文档
├── node_modules                    所有的依赖安装的目录
├── yarn-lock.json          锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json                    
├── public                              静态公共目录
└── src                                 开发用的源代码目录

---

2.react虚拟DOM 以及 16版本以后的react fiber算法

1.react和vue一样有虚拟dom的机制,这也是react高性能的体现，虚拟dom就是一个jsx的对象模拟真实dom的结构,需要靠render函数来将虚拟dom解析成真实dom渲染到页面上

2.在react 16版本之前比较两次虚拟dom改变的算法是diff算法，diff算法是比较两次虚拟dom 的不同，生成path文件，再通过render函数来渲染成真实的dom结构。

在16版本中react采用了新的算法react fiber。react fible的方法其实很简单——分片，把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。

---

3.函数式组件

import React from 'react'
import ReactDom from 'react-dom'

//const App = <h1>hello react</h1>//用一个变量存结构再传入到ReactDom.render中

const app = ( a ) => {                     //也可以用一个函数来传递结构
    return (<h1>hello React 你好--{a.name}</h1>)//传入参数的时候要使用单括号 注释也要单括号
}

ReactDom.render( //ReactDom是jsx模板，用render方法将jsx模板转换成真实dom
    //app
    <App name = 'zhuxiaohang'></App>    //将方法用组件的形式使用,document.getElementById('root')
)

---

4.类组件

// React 类组件
//组件也可以是一个类

import React,{Component} from 'react'

//创建类 【组件】
class App extends Component{
    render(){   //render方法的作用就是将jsx解析成虚拟dom对象解构
        return ( 
            <div>
                <h1>hello 这里是React 类组件的创建形式</h1>
            </div>
        )
    }
}

//导出类
export default App

当类组件要接收绑定在组件上的属性时候 需要使用props属性

组件上的属性

<App name='zhuxiaohang'></App>

获得该属性

class App extends Component{
    render(){   //render方法的作用就是将jsx解析成虚拟dom对象解构

        console.log(this)//App继承了Component里的props属性

        return ( 
            <div>
                <h1>hello 这里是React 类组件的创建形式 ————{this.props.name} </h1>
            </div>
        )
    }
}

es6 class组件其实就是一个构造器，每次使用组件都相当于实例化组件

---

5.组件的组合，嵌套

将一个组件渲染到某一节点里的时候，会将这个节点里原有内容覆盖

组件嵌套的方式就是将子组件写入到父组件的模板中，因为react没有vue中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系

组件的嵌套

子组件

import React,{Component} from 'react'

class Child extends Component{
    render(){ //jsx只有一个唯一的根元素
        return (
            <div>
                <h3>这里是Child 类组件</h3>
            </div>
        )
    }
}

export default Child

嵌套到父组件中

//创建类 【组件】
class App extends Component{
    render(){   //render方法的作用就是将jsx解析成虚拟dom对象解构

        console.log(this)

        return ( 
            <div>
                <h1>hello 这里是React 类组件的创建形式 ————{this.props.name} </h1>
                <hr/>
                <Child></Child> //子组件嵌套
            </div>
        )
    }
}

//导出类
export default App

但是组件中写的内容会被覆盖 如下：

ReactDom.render( //ReactDom是jsx模板，用render方法将jsx模板转换成真实dom
    // //app
    // app({                   //一旦使用函数传递就可以设置参数
    //     name:'zhuxiaohang'
    // }),<App name='zhuxiaohang'>
        <Child></Child>         //这样插入子组件没有效果
    </App>,document.getElementById('root')
)

解决方法：

在父组件中写{this.props.children} 相当于vue中的插槽

class App extends Component{
    render(){   //render方法的作用就是将jsx解析成虚拟dom对象解构

        console.log(this)

        return ( 
            <div>
                <h1>hello 这里是React 类组件的创建形式 ————{this.props.name} </h1>
                <hr/>
                {this.props.children}//这样子组件就可以显示了
            </div>
        )
    }
}

组件嵌套的写法

1.将子组件以标签的形式写在父组件的模板中

2.将子组件以标签的形式写在父组件的内容中，通过模板中{this.props.children}来接收

---

6.jsx原理

要明白jsx原理，需要先明白如何用js对象来表现一个dom元素的结构

看下面的dom结构

<div class='app' id='appRoot'>
  <h1 class='title'>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>

上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示：

{
  tag: 'div',attrs: { className: 'app',id: 'appRoot'},children: [
    {
      tag: 'h1',attrs: { className: 'title' },children: ['欢迎进入React的世界']
    },{
      tag: 'p',attrs: null,children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。

于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。

下面代码:

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

class App extends React.Component {
  render () {
    return (
      <div className='app' id='appRoot'>
        <h1 className='title'>欢迎进入React的世界</h1>
        <p>
          React.js 是一个构建页面 UI 的库
        </p>
      </div>
    )
  }
}

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

编译之后将得到这样的代码:

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

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "div",{
          className: 'app',id: 'appRoot'
        },React.createElement(
          "h1",{ className: 'title' },"欢迎进入React的世界"
        ),React.createElement(
          "p",null,"React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

ReactDOM.render(
    React.createElement(App),document.getElementById('root')
)

React.createElement` 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等,语法为

React.createElement(
  type,[props],[...children]
)

所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程:

JSX —使用react构造组件，bable进行编译—> JavaScript对象 — `ReactDOM.render()`—>DOM元素 —>插入页面

---

7.组件中的dom样式

1.行内样式

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
  <h3> 第一种：行内样式 </h3>
        <p style = { {width: '100px',height: '100px',background: 'red',color: 'white'} }> 行内样式 </p>

        <p style = { this.styles }> 行内样式 </p>

行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方，例如render函数里、组件原型上、外链js文件中

2.外部引用

// 引用外部样式文件
import './StyleComponent.css'


<h3> 第二种： 外部引用 </h3>
<p className = "size bg"></p>   //注意用的是classname不是class

3.第三方工具classname

安装cnpm i classname

import classname from 'classname'

<h3> 第三种： 使用classname/classnames 第三方包来定义类名 </h3>
        <p
          className = {
            classname({
              size: true,bg: true
            })
          }
        ></p>

4.样式组件

要安装第三方包`styled-components

// 使用样式组件

import styled from 'styled-components'

// 变量名称是大写
// 这里面写的就是css样式属性了
const Container = styled.div`
  width: 200px;
  height: 200px;
  background: yellow;
  color: white;
`

<h3> 第四种： 样式组件 【 样式也可以是一个组件】 </h3>
        {/* 使用样式组件 */}
        <Container/>
        <Wrapper color = "pink"> 
          <p> 这是样式属性 </p>
          <span> 这是样式组件的子元素 </span>
        </Wrapper>

---

8.组件的数据挂载方式

React中数据分为两个部分

1.属性

2.状态（频繁变化的就写成状态）

vue中数据只有状态这一种类型

属性（props）

1.外部传入

1.父组件传数据给子组件

父组件:

class Father extends Component{
    render(){
        return (
            <div>
                <h3>Father组件</h3>
                <hr/>
                <Son name='zhuxiaohang'></Son>
            </div>
        )
    }
}

子组件

class Son extends Component{
    render(){
        return (
            <div>
                <h4>Son组件</h4>

                <p>从父组件传来一个属性 name：{this.props.name}</p>
            </div>
        )
    }
}

2.内部设置【组件自己设置】

const Content = (props) =>{
    //函数式组件中是不需要使用this的，因为他可以通过props这个参数来接收 外部传入的属性
    //函数式组件是不能设置自己的属性的，只能接收外部传入的属性
    return <h1>{props.money}</h1>
}


class Father extends Component{

    //static 是用来定义类自己的属性
    static defaultProps = {
        zhi:'屁股上的'
    }
    //没有用static定义的属性,我们称之为实例属性
    a = 1

    render(){
        return (
            <div>
                <h3>Father组件</h3>
                <p>Father内部自己的属性:{this.props.zhi}</p>
                <hr/>
                <Son name='zhuxiaohang'></Son>
                <hr/>
                <Content money='10000'></Content>
            </div>
        )
    }
}

---

9.props.children

我们知道使用组件的时候，可以嵌套。要在自定义组件的使用嵌套结构，就需要使用 props.children 。在实际的工作当中，我们几乎每天都需要用这种方式来编写组件。

import React,{ Component,Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
  render () {
    return (
        <h1>欢迎进入{this.props.children}的世界</h1>
    )
  }
}

const Content = (props) => {
  return (
    <p>{props.children}</p>
  )
}

class App extends Component {
  render () {
    return (
        <Fragment>
        <Title>React</Title>
        <Content><i>React.js</i>是一个构建UI的库</Content>
      </Fragment>
    )
  }
}

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

---

10.使用prop-type检查props（属性验证）

React其实是为了构建大型应用程序而生,在一个大型应用中，根本不知道别人使用你写的组件的时候会传入什么样的参数，有可能会造成应用程序运行不了，但是不报错。为了解决这个问题，React提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types:

$ npm i prop-types -S

---

11.状态（state）

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的状态不同（自己管理）

组件自己的状态只能自己更改

//1.实例属性方式定义（不推荐 ）

class StateComponent extends Component{
    state ={                    //保存属性
        msg:'hello 这是一条状态'
    }

    render(){
        console.log(this.state.msg) 
        return (
            <div>
                <h4>组件的状态定义形式</h4>
                <p>{this.state.msg}</p>
            </div>
        )
    }
}

//2.在构造函数constructor中定义 (推荐)

class StateComponent extends Component{
    
        constructor(props){
            super(props)
            this.state = {
            msg:'hello 这是React组件定义的第二种形式'
        }
    
        }
    render(){
        console.log(this.state.msg)
        return (
            <div>
                <h4>组件的状态定义形式</h4>
                <p>{this.state.msg}</p>
            </div>
        )
    }
}

react中事件处理程序的绑定

class StateComponent extends Component{
    
        constructor(props){
            super(props)
            this.state = {
            msg:'hello 这是React组件定义的第二种形式'
        }
    
        }

        //业务：点击按钮修改state

        //在类组件中 通过实例方法的形式来定义事件处理
        
        change(){
            console.log(this) //方法中的this是undefind
            //arg1可以是对象 也可以是函数 但是函数一定要有return
            //arg2是一个回调函数，这个回调函数一般不写
            this.setState({
                msg:'修改后的属性值'
            })
        }

        //xie成箭头函数可以有效的避免this丢失的问题
        //change=()=>{this.setState({
        //msg:'箭头函数的事件处理程序'
        //})}


    render(){
        console.log(this)
        return (
            <div>
                <h4>组件的状态定义形式</h4>

                {/* react 中事件的绑定*/}
                <button onClick = {this.change.bind(this)}> change state </button>
                <p>{this.state.msg}</p>
            </div>
        )
    }
}