前端学习 - React 入手

2020-06-20 本文已影响0人 Super三脚猫

React 学习

React Native.jpeg

💭自己的不足

ES5语法
ES6语法
Html标签的遗忘
Css样式单词的遗忘
原生js的深入

🧩JSX 语法

函数的使用方式：如果需要解析对象，需要定义一个方法
{show && greet} 表达式写法
数组循环的时候：{/* diff时候，首先比较type，然后是key，所以同级同类型元素，key值必须得唯一 */}
{/* 这里的className 就是class，避免和组件里的class冲突所以用className */}
模块化，为了解决class样式冲突：src_logo__nxkEw

知识要点循环时的diff算法，先比较值后比较key，并且key是唯一的

代码示例

// 函数的使用方式：如果需要解析对象，需要定义一个方法
function formaName(obj){
    return obj.fisrtName + ' ' + obj.lastName;
}
<div>{formaName(obj)}</div>

// 模块化的使用
import styles from './index.module.css'
<div className={styles.app}>
  <img src={logo} alt="" className={styles.logo}>
</div>

🧩组件

组件分为两种class组件和function组件

class组件
class组件通常拥有状态和⽣命周期，继承于Component，实现render⽅方法
function组件
函数组件通常⽆无状态，仅关注内容展示，返回渲染结果即可

知识要点 useEffect Hook

从React16.8开始引⼊入了了hooks，函数组件(function组件)也能够拥有状态

什么是状态？
所谓的状态就是拥有生命周期 和 setState 去存储值，所以function组件的功能定位是渲染显示的功能，复杂的用class组件形式。

🧩setState

两个参数：setState(partialState, callback)

partialState: object|function
可能是一个函数，也可以是对象。对象用的比较多。
callback:function state
更新之后被调⽤,所以这个是同步值

代码示例

// 绑定一个合成事件
setCounter = () => {
    this.changeValue(1);
}

changeValue = v => {
    // 对象写法
    this.setState({
        counter: this.state.counter + v
    }, () => {
        // 第二个参数
        console.log('counter', this.state.counter);
    })

    // setState的函数写法
    this.setState(state => {
        return {
           counter: state.counter + v
        };
    });
}

知识要点

为什么使用 setState：
它是异步的，改变值后没有立马去更新更改数据值.

setState在合成事件和生命周期中是异步的，这里说的异步其实是批量更新，达到了优化性能的目的。setState在setTimeout里和原生事件里是同步的

🧩生命周期

import PropTypes from 'prop-types';

1. static defaultProps = {
      msg: 'omg'
   }
2. static propsTypes = {
      msg: PropTypes.string  // .isRequired 可以设置组件值不可以为空
   }

3. constructor(props) { super(props) }
4. UNSAFE_componentWillMount // 即将要废弃
5. static getDerivedStateFromProps(props, state) // 代替组件将要挂载
6. render() // 渲染
7. componentDidMount()  // 组件挂在完成
===============================================================
8. shouldComponentUpdate(nextProps, nexState) // state更新
9. UNSAFE_componentWillUpdate // 即将要废弃
10. render() // 渲染
11. getSnapshotBeforeUpdate() // 组件将要更新
12. componentDidUpdate() // 组件更新完成
===============================================================
13. UNSAFE_componentWillReciveUpdate // 父级state更新
                   纠正：ReceiveProps
===============================================================
14. componentWillUnmount()  // 组件将要卸载

知识要点

V17废弃：将要挂载、父组件接受新props就会执行、将要更新三个生命周期

static getDerivedStateFromProps 必须要有返回值or null

shouldComponentUpdate 必须return bool , true变更，false不变

getSnapshotBeforeUpdate 他的返回值可以作为 componentDidUpdate的参数值

// 组件更新完成 snapshot 参数可以获取更新值
componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate', prevProps, prevState, snapshot);
}

🧩组件复合

组件复合逻辑叙述：

主页 HomePage.js 里引入 Layout组件
Layout 组件引入 TopBar头部以及BottomBar底部
App.js 引入 HomePage 解析渲染(由主页跳转到各个页面)

props子组件传参

import React, { Component } from 'react';
import Layout from './Layout';

export default class HomePage extends Component {
    render() {
        return (
            // 往父组件传参
            <Layout showTopBar={false} showBottomBar={true} title='商城首页'>
            // 这里面可以是一个对象
            {
                {
                    // 传输JSX
                    content: (
                        <div>
                            <h3>HomePage - Layout - 具名插槽</h3>
                        </div>
                    ),
                    // 传输文本
                    text: '我是一个文本',
                    // 传输事件
                    btnClick: ()=>{
                        console.log('btnClick');
                    }
                }
            }
            </Layout>
        )
    }
}

props父组件接收参数

import React, { Component } from 'react';
import TopBar from '../components/TopBar';  // 引入公共头部
import BottomBar from '../components/BottomBar'; // 引入公共底部

export default class Layout extends Component {
    // 实现组件加载时修改 title
    componentWillMount() {
        const { title = '标题' } = this.props;
        document.title = title; // 获取标题
    }
    render() {
        // 接收子组件参数并定义 下面用 children. 指向参数
        const { children, showTopBar, showBottomBar  } = this.props;
        return (
            <div>
                {showTopBar && <TopBar/>}
                    <h3>{children.content}</h3>
                    <h2>{children.text}</h2>
                    <button onClick={children.btnClick}>Clike me !</button>
                {showBottomBar && <BottomBar/>}
            </div>
        )
    }
}

知识点
以上可以封装，也类似 Vue的 具名插槽。
其实下面的React框架，组件源码就是一些类似Button的封装和使用：

React 组件框架
Ant Design

🧩Redux

基本封装顺序

import { createStore } from 'redux';

1. createStore 创建 Store       (创建库)
2. reducer 初始化、修改状态函数    (创建规则)
3. getState 获取状态值           (获取值)
4. dispatch 提交更新             (调度)
5. subscribe 变更订阅            (更新值)

this.forceUpdate
forceUpdate()当你知道一些很深的组件state已经改变了的时候，可以在该组件上面调用，而不是使用this.setState()

大白话诠释：
forceUpdate() 怎么理解？
forceUpdate就是重新render。有些变量不在state上，但是你又想达到这个变量更新的时候，刷新render；或者state里的某个变量层次太深，更新的时候没有自动触发render。这些时候都可以手动调用forceUpdate自动触发render。所以建议使用immutable来操作state，redux等flux架构来管理state

immutable
Flux架构的工作原理

🧩React-Redux

Provider 为后代组件提供store (解决了每个页面都引入store的麻烦)

工作原理是上下文
代码示例：

 <index.js>

 import store from './store/'; // 全局拿到引入store
 import { Provider } from 'react-redux';

 ReactDOM.render(
   <Provider store={store}> // 这里把store传递到子组件
     <App />
   </Provider>,
   document.getElementById('root')
 );

connect 为组件提供数据和变更方法 (通过该方法获取数据)
- 高阶组件用法
- 代码示例：

<组件页面>

import React, { Component } from 'react';
import { connect } from 'react-redux'; // 引入 connect 方法

export default connect(
  // connect 要做的两件事情：
  // 1. mapStateToProps (把数据state映射到props上)
  state => ({ num: state}),
  // 2. mapDispatchToProps (把调度提交dispatch映射到props上)
  // 自己会默认在 this.props 里带 dispatch 方法
  {
      add: () => ({type: 'Add'}),
      minus: () => ({type: 'Minus'})
  }
)(
  class ReactReduxPage extends Component {
      render() {
          const { num, dispatch, add, minus } = this.props;
          console.log('props', this.props);
          return (
              <div>
                  <h3>ReactReduxPage</h3>
                  <p>{ num }</p>
                  {/* <button onClick={() => dispatch({type: 'Add'})}>Add</button> */}
                  {/* 第二种写法 在 connect 第二个参数中定义一个方法 */}
                  <button onClick={add}>Add</button>
                  <button onClick={minus}>Minus</button>
              </div>
          )
      }
  }
)

知识点

react-redux高阶组件connect方法

connect 第一个参数是 mapStateToProps (把数据state映射到props上)

connect 第二个参数是 mapDispatchToProps (把调度提交dispatch映射到props上)，该参数可以封装成一个对象，定义N个方法。

React.js 的 context

🧩React-Router

react-router 包含3个库：
- react-router 提供基本的路由
- react-router-dom 实际应用的是这个，并且会包含1.(在浏览器中使用)
- react-router-native 在rn中使用

使用方法
- Link 用来跳转地址
- Switch 独占路由 (设定⼀个没有path的路由，在路由列表最后面，表示一定匹配)
- Route 查看当前 Localtion，来匹配跳转到哪个组件
```
@param path 匹配路径
@param component/children/render 渲染方式
@param exact 精确匹配（解决页面都渲染的问题）
```

Route 路由的三种渲染方式 (三者渲染，是互斥的)
- component 组件形式
- children 不管 Localtion（地址）是什么都会显示，优先级最高
- render 优先级最低

404 页面路由 Switch 独占路由

设定⼀个没有path的路由，在路由列表最后面，表示一定匹配

<Route component={EmptyPage} />

代码示例

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

export default class RouterPage extends Component {
    render() {
        return (
            <div>
                <h3>RouterPage</h3>
                    <Router>
                        // Link 用来跳转地址
                        <Link to='/'>首页</Link>
                        <span> | </span>
                        <Link to='/user'>用户中心</Link>

                        // Switch 独占路由
                        <Switch>
                            // Route 查看当前Localtion，来匹配跳转到哪个组件
                            <Route exact path='/' component={HomePage} />
                            // 三种用法 是互斥的
                            <Route path='/user'
                                component={UserPage}
                                children={() => <div>children</div> }
                                render={() => <div>render</div> }
                            />
                            // 404 not found router
                            <Route component={EmptyPage} />
                        </Switch>
                    </Router>
            </div>
        );
    }
}

知识点

独占路由、Route路由的三种渲染方式、它们的优先级。

🧩PureComponent

PureComponent 优缺点
- 可以实现性能的优化 (内置实现shouldComponentUpdate)
- 缺点是必须要用class形式，⽽且要注意是浅比较

和 Component 的区别
- 两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对⽐ prop 和 state 的方式来实现了该函数
- 此外，React.PureComponent 中的 shouldComponentUpdate() 将跳过所有⼦组件树的 prop 更新。因此，请确保所有⼦组件也都是“纯”的组件

代码示例

import React, { Component, PureComponent } from "react";

export default class PureComponentPage extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            count: 0,
            // obj: { num: 0 } // 浅比较会失效
        }
    }

    setCount=()=>{
        this.setState({
            count: 100,
            // obj: { num: 1000 } // 浅比较会失效
        })
    }

    // 当 extends 是 Component 时该方法 优化函数只执行一次渲染
    // shouldComponentUpdate(nexProps, nexState) {
    //     console.log('nexState', nexState.count);
    //     console.log('this.state', this.state.count);
    //     return nexState.count !== this.state.count;
    // }

    render() {
        console.log('查看render执行了多少次');
        const { count } = this.state;
        return (
            <div>
                <h3>PureComponent</h3>
                <button onClick={this.setCount}>{count}</button>
            </div>
        )
    }
}

知识点

仅作对象的浅层⽐较。如果对象中包含复杂的数据结构，则有可能因为⽆法检查深层的差别，产生错误的⽐对结果。仅在你的 props 和 state 较为简单时，才使⽤ React.PureComponent，或者在深层数据结构发生变化时调用 forceUpdate() 来确保组件被正确地更新。你也可以考虑使用 immutable 对象加速嵌套

前端学习 - React 入手

React 学习

💭自己的不足

🧩JSX 语法

🧩组件

🧩setState

🧩生命周期

🧩组件复合

🧩Redux

🧩React-Redux

🧩React-Router

🧩PureComponent

猜你喜欢

热点阅读