react18渲染方式

再最新的react18中
使用新的方式

  1. import {createRoot} from"react-dom/client";
  2. const rootElement = createRoot(document.getElementById('global'))
  3. rootElement.render(<App/>)

集成

在网页中集成react 需要同时集成react 和 reactdom

  1. <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  
  2. <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  1. const React = window.React;
  2. const ReactDOM = window.ReactDOM;
  4. const title = React.createElement('h1', {}, 'My First React Code');
  6. ReactDOM.render(
  7.   title,
  8.   document.getElementById('global')
  9. );

组件

会被翻译成 React.createElement(‘Welcome’, …

setState的写法
this.setState((state)=>{
return {n: state.n+1}
})
因为setState是异步更新

CSS相关

安装dart-scss

  1. yarn add node-sass@npm:dart-sass

标准化

  1. @import-normalize;

生成基础样式，保证在不同浏览器的默认样式基本一致

使用绝对路径

使用../.. 引用模块麻烦且容易出错

Vue中使用@表示src目录，React直接使用@import ‘xxx/yyy’来引入src/xxx/yyy.scss
然后配置tsconfig , 参考 https://create-react-app.dev/docs/importing-a-component

styled-components