一文加强对React的记忆(2021 年 6 月更新),收藏再也不用查看文档、教程了

我不经常使用 React，所以每当我需要在 React 中做最小的事情时，我都必须查看文档、教程或在论坛上发布问题。

这就是我决定做这个记忆辅助工具的原因，鉴于我的记忆力不是那么好，我想为什么不用我所知道的关于 React 的所有概念来制作一个可怕的记忆辅助工具。

所以我可以不时阅读它，从而加强我对 React 的了解。

如果您有想法或建议，请不要犹豫，并在评论部分这样做。

备忘录

创建一个 React 应用程序

// 创建
npx create-react-app my-app-name

// 启动
cd my-app-name
yarn start

// http://localhost:3000
/**
*第一个 React 功能组件
*无需从 'react' 导入 React（自 React 17 起）
*首字母必须大写
*必须返回 JSX
**/
(src/App.js)
// React component
function App(){
  return <h1>Hello World</h1>
} 

export default App;

这个组件如何渲染到浏览器？主项目文件是 src/index.js 并且在该文件中有渲染组件的指令

ReactDOM.render(<App />, document.getElementById('root'))

然后 App 组件将在 public/index.html 'root' div中呈现

导入组件 组件将在单独的文件中创建。每个组件都需要导出然后导入

function Greeting(){
    return <h1>Hello World</h2>
}
export default Greeting

然后可以导入该组件

import Greeting from './Gretting'

function App(){
    return <Greeting />
}

或名称导出...

export function Greeting(){
    return <h1>Hello World</h2>
}

然后可以导入该组件

import {Greeting} from './Gretting'
//BEM 命名约定
return (
<div className="app">
  <h1 className="app_title">Welcome to my application: {appTitle}</h1>
  <div className="product">
    <h1 className="product__name--large">Product name: {product.name}</h1>
<h1 className="product__name--small">Nick name: {product.nickName}</h1>
    <p className="product__description">Product description: {product.description}
  </div>
<div>
)

JSX 规则 返回单个元素（只有一个父元素）

// not valid
return <h1>Hello world</h1><h2>Hi!</h2>

return (
    <>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </>
)

使用 className 而不是 class 所有属性名称都需要是驼峰式的

// not valid
return (
    <div class="title">
        Hello World
    </div>
)

// valid
return (
    <div className="title">
    </div>
)

关闭每个元素

return (
    <img src="http:example.com/image.jpg" />
    <input type="text" name="first_name" />
)

嵌套组件