Slxner

Appearance

React的学习分享 ​

1、React简单使用 ​

要在 HTML 的 <head> 中在线引用 React，可以添加以下内容：

js
<!--react核⼼包-->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!--react dom相关的包-->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 提供es6和jsx的⽀持-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2、学习中遇到的细节问题 ​

  • 严格模式下React会故意调用组件的生命周期方法两次以帮助识别潜在问题。如果不想要严格模式，只需要删除<React.StricMode>

    react
    // 严格模式
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);
    react
    // 示例代码
// 如果是严格模式则Demo1和Demo2组件的生命周期方法componentDidMount()各被执行两次
import React from "react";

class Demo1 extends React.Component {
    render() {
        console.log(this.props)
        return <div>我是demo1 {this.props.a}</div>
    }
}

class Demo2 extends React.Component {
    render() {
        return <div>我是demo2</div>
    }
}

function withLog(Wrapcomponent) {
    return class extends React.Component {
        componentDidMount() {
            console.log("挂载了")
        }

        render() {
            return <Wrapcomponent {...this.props}/>
        }
    }
}

const MyCom = withLog(Demo1)
const MyCom2 = withLog(Demo2)

class App extends React.Component {
    state = {
        msg: "我是⽗组件的数据"
    }

    render() {
        return (
            <div>
                <MyCom a={this.state.msg}/>
                <MyCom2 b={this.state.msg}/>
            </div>
        )
    }
}

export default App;

Last updated: