一、概述

V：react17.0.2

声明式设计、组件化、单向数据流、虚拟DOM

公司要用

二、dangerouslySetInnerHTML

function App() {
  let html = `
    <h1>osoLife</h1>
  `;
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: html,
      }}
    ></div>
  );
}

三、getDerivedStateFromProps

getDerivedStateFromProps：第一次初始化以及后续的更新过程中（包括自身状态更新以及父传子），返回一个对象作为新的state，返回null则说明不需要在这里更新state

import React from "react"
export default class Child extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 'osoLife'
        }
    }
    static getDerivedStateFromProps(nextProps, nextState) {
        return {
            name: nextState.name.toUpperCase()
        }
    }
    render() {
        return (
            <div>{this.state.name}</div>
        )
    }
}

四、getSnapshotBeforeUpdate

import React from "react"
export default class Child extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 'osoLife'
        }
    }
    getSnapshotBeforeUpdate() {
        return 100
    }
    componentDidUpdate(prevProps, prevState, value) {
        console.log(prevProps, prevState, value)
    }
    render() {
        return (
            <div>{this.state.name}</div>
        )
    }
}

五、反向代理

npm i http-proxy-middleware --save

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:5000',
            changeOrigin: true
        })
    )
}

六、styled-components

npm i styled-components

import styled from 'styled-components'

class App extends React.Component {
    render() {
        const StyledFooter = styled.footer`
            position: fixed;
            left: 0;
            bottom: 0;
            ul {
                display: flex;
            }
        `
        return (
            <StyledFooter>
                <ul>
                    <li>首页</li>
                    <li>我的</li>
                </ul>
            </StyledFooter>
        )
    }
}

七、单元测试

npm i react-test-renderer

// test/1.test.js
describe(('react-test-render', function() {

})

npm test

注

@千（ker）[22]【b-qfjy】