react知识点总结

创建react项目

create-react-app

引入ant design

react的vscode插件

Simple React Snippets
也可以使用自定义的

如何修改配置文件

1.npm run eject 暴露所有的配置文件 不可逆的，在发射前需要提交git文件
2.安装react-app-rewired 这个包需要报pakage.json中的脚本配置修改为下面代码,再在更目录下创建config-overrides.js的配置

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

React.StrictMode是什么？

StrictMode 检查项目中潜在问题。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
Fragment 类似于 vue中的template

react项目文件中 为什么都要导入react包

import React from "react";
import ReactDOM from 'react-dom'
let h1 = <h1>123</h1>  //babel会编译这个 下面有编译的地址
function App() {
  return h1
}
ReactDOM.render(<App />, document.getElementById('root'))
export default App;

babel试一试地址

let h1 = /*#__PURE__*/React.createElement("h1", null, "123");
可以看到这里用到了React  所以需要导入

用到了jsx语法 所以每个文件都需要导入react包

类组件 和 函数组件

函数组件使用hooks 可以替换类组件

受控组件和 非受控组件

受控组件
不受控组件

<input value={name} onChange={this.changeName} /> // change = e => this.setState({name:e.target.value})}
<input ref={(el)=>{this.qq = el }} /> // this.qq 就是当前dom

react常用写法

<button onClick={this.fn.bind(this)}>btn</button> //当fn中用到 this时 需要用bind绑定this
<div dangerouslySetInner