import React, {Component} from 'react'
import ReactDOM from 'react-dom'

export class Hello extends Component {
  ...
}
export default function World() {
  /* ... */
}

使用 export 導(dǎo)出 Hello，export default 導(dǎo)出 World 組件

import World, { Hello } from './hello.js';

使用 import 導(dǎo)入 Hello 組件，在示例中使用。

import React from "react";
import "./Student.css";

export const Student = (
  <div className="Student"></div>
);

注意：類屬性 className

const divStyle = {
  backgroundImage: 'url(' + imgUrl + ')',
};
export const Student = (
  <div style={divStyle}></div>
);

<Student name="Julie" age={23}
  pro={true} />

函數(shù)組件 Student 中訪問屬性

function Student(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class 組件 Student 中訪問屬性

class Student extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

class 組件使用 this.props 訪問傳遞給組件的屬性。

const elm = ['one', 'two', 'three'];
function Student() {
  return (
    <ul>
      {elm.map((value, index) => (
        <li key={index}>{value}</li>
      ))}
    </ul>
  );
}

key 值在兄弟節(jié)點(diǎn)之間必須唯一

export default function Hello() {
  function handleClick(event) {
    event.preventDefault();
    alert("Hello World");
  }

  return (
    <a href="/" onClick={handleClick}>
      Say Hi
    </a>
  );
}

function addNumbers(x1, x2) {
  return x1 + x2;
}

const element = (
  <div>
    {addNumbers(2, 5)}
  </div>
);

import { useState } from 'react'
import Avatar from './Avatar';
import Profile from './Profile';

function Student() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Avatar src={count} />
      <Profile username={count} />
    </div>
  );
}

React 并_沒有_創(chuàng)建一個(gè)新的 div。它只是把子元素渲染到 domNode 中。domNode 是一個(gè)可以在任何位置的有效 DOM 節(jié)點(diǎn)。

render() {
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

提供了一種將子節(jié)點(diǎn)渲染到存在于父組件以外的 DOM 節(jié)點(diǎn)的優(yōu)秀的方案

render() {
  return 'Look ma, no spans!';
}

您可以只返回一個(gè)字符串。查看: Fragments & strings

const Student = () => [
  <li key="A">First item</li>,
  <li key="B">Second item</li>
];

不要忘記 key！查看: Fragments & strings

import {Component,createRef} from 'react'

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
  }

  render() {
    return <div ref={this.myRef} />;
  }
}

提示：Refs 適用于類組件，但不適用于函數(shù)組件（除非您使用 useRef hook，請參閱hooks）

function CustomTextInput(props) {
  // 這里必須聲明 $input，這樣 ref 才可以引用它
  const $input = useRef(null);
  function handleClick() {
    $input.current.focus();
  }
  return (
    <div>
      <input type="text" ref={$input} />
      <input
        type="button" value="聚焦文本輸入"
        onClick={handleClick}
      />
    </div>
  );
}

<div>
  <Header />
  <React.StrictMode>
    <div>
      <ComponentOne />
      <ComponentTwo />
    </div>
  </React.StrictMode>
  <Footer />
</div>

• 識別不安全的生命周期
• 關(guān)于使用過時(shí)字符串 ref API 的警告
• 關(guān)于使用廢棄的 findDOMNode 方法的警告
• 檢測意外的副作用
• 檢測過時(shí)的 context API
• 確?？蓮?fù)用的狀態(tài)

突出顯示應(yīng)用程序中潛在問題的工具。請參閱：嚴(yán)格模式

function CustomButton(props) {
  const { color = 'blue' } = props;
  return <div>{color}</div>
}

function CustomButton() {
  const [color, setColor]=useState('blue')
  return <div>{color}</div>
}

const Menu = ({ children }) => (
  <div className="menu">{children}<div>
);

Menu.Item = ({ children }) => (
  <div>{children}<div>
);

<Menu>
  <Menu.Item>菜單一</Menu.Item>
  <Menu.Item>菜單二</Menu.Item>
<Menu>

let element = <h1>Hello, world!</h1>;
let emptyHeading = <h1 />;

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

const element = <h1>Hello, world</h1>;
root.render(element);

參考：渲染元素

const avatarUrl = "img/picture.jpg"
const element = <img src={avatarUrl} />;

const element = (
  <button className="btn">
    點(diǎn)擊我
  </button>
);

注意：類屬性 className

let name = '張三';
let element = <h1>Hello, {name}</h1>;

function fullName(firstName, lastName) {
  return firstName + ' ' + lastName;
}
let element = (
  <h1>
    Hello, {fullName('三', '張')}
  </h1>
);

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};
function MyComponent() {
  return <div style={divStyle}>組件</div>;
}

const markup = {__html: '我 · 你' };

const MyComponent = () => (
  <div dangerouslySetInnerHTML={markup} />
);

dangerouslySetInnerHTML 是 React 為瀏覽器 DOM 提供 innerHTML 的替換方案。

const MyComponent = () => (
  <div>
    <input type="radio" id="ab" name="v">
    <label for="ab">HTML</label>
  </div>
);

for 在 JS 中是保留字，JSX 元素使用了 htmlFor 代替

非受控組件的屬性，設(shè)置組件第一次掛載時(shí)的 value

<textarea defaultValue="Hello" />

<input>、<select> 和 <textarea> 支持 value 屬性

非受控組件的屬性，設(shè)置組件是否被選中

<input type="radio" defaultChecked />

類型為 checkbox 或 radio 時(shí)，組件支持 checked 屬性

屬性用于指定 CSS 的 class

<div className="warp">...</div>

React 中使用 Web Components 使用 class 屬性代替

export default function Weather(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      <b>{isLoggedIn ? '已' : '未'}</b>登錄。
    </div>
  );
}

{isShow && <div>內(nèi)容</div>}

<Dropdown>
  下拉列表
  <Menu>
    <Menu.Item>菜單一</Menu.Item>
    <Menu.Item>菜單二</Menu.Item>
    <Menu.Item>菜單三</Menu.Item>
  </Menu>
</Dropdown>

組件名稱以大駝峰式命名。

function Greeting(props) {
  let button;
  if (props.isLoggedIn) {
    button = <UserGreeting />;
  } else {
    button = <GuestGreeting />;
  }
  return <div>{button}</div>;
}

function Student() {
  const [count, setCount] = useState(0);
  return (
    <Fragment>
      {/* 這里寫注釋 */}
    </Fragment>
  );
}

class Welcome extends React.Component {
  render() {
    return <h1>{this.props.name}</h1>;
  }
}

import React, {PureComponent} from 'react'

class MessageBox extends PureComponent {
  ···
}

import React, { Component } from 'react';
// 高階組件 with
const with = data => WrappedComponent => {
  return class extends Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        <WrappedComponent data={data} />
      )
    }
  }
}

使用高階組件

const LowComponent = (props) => (
  <div>{props.data}</div>
);

const MyComp = with('Hello')(LowComponent)

function FancyBorder(props) {
  return (
    <div className={'Fancy'+props.color}>
      {props.children}
    </div>
  );
}

組件可以通過 JSX 嵌套

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="title">歡迎</h1>
      <p className="message">
        感謝您訪問我們的宇宙飛船
      </p>
    </FancyBorder>
  );
}

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="left">
        {props.left}
      </div>
      <div className="right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={<Contacts />}
      right={<Chat />}
    />
  );
}

給組件 SplitPane 傳遞 left 和 right 兩個(gè)組件參數(shù)

import React from 'react';
import UserAvatar from "./UserAvatar";

export default function UserProfile() {
  return (
    <div className="UserProfile">
      <UserAvatar />
      <UserAvatar />
    </div>
  );
}

注意：假設(shè) UserAvatar 在 UserAvatar.js 中聲明

import React from 'react';
import {Button} from 'uiw';
export default function UserProfile() {
  return (
    <div className="UserProfile">
      <Button type="primary">
        主要按鈕
      </Button>
    </div>
  );
}

注意：uiw 組件在 npmjs.com 上找到，需要先安裝導(dǎo)入

const Menu = ({ children }) => (
  <div className="menu">{children}<div>
);

Menu.Item = ({ children }) => (
  <div>{children}<div>
);

<Menu>
  <Menu.Item>菜單一</Menu.Item>
  <Menu.Item>菜單二</Menu.Item>
<Menu>

function TextInputWithFocusButton() {
  const $input = useRef(null);
  const onButtonClick = () => {
    $input.current.focus();
  };
  return (
    <>
      <input ref={$input} type="text" />
      <button onClick={onButtonClick}>
        聚焦輸入
      </button>
    </>
  );
}

current 指向已掛載到 DOM 上的文本輸入元素

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);

父組件使用

<FancyInput ref={inputRef} />
inputRef.current.focus()

useEffect(() => {
  const subs = props.source.subscribe();
  return () => {
    subs.unsubscribe();
  };
}, [props.source]);

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

const memoizedValue = useMemo(
  () => {
    return computeExpensiveValue(a, b)
  },
  [a, b]
);

function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>
        你喜歡React嗎？
      </label>
      <input id={id} type="checkbox" />
    </>
  );
};

用于生成跨服務(wù)端和客戶端穩(wěn)定的唯一 ID 的同時(shí)避免 hydration 不匹配

function useFriendStatus(friendID) {
  const [
    isOnline, setIsOnline
  ] = useState(null);
  // ...
  // 在開發(fā)者工具中的這個(gè) Hook 旁邊顯示標(biāo)簽
  // e.g. "FriendStatus: Online"
  useDebugValue(
    isOnline ? 'Online' : 'Offline'
  );
  return isOnline;
}

不推薦你向每個(gè)自定義 Hook 添加 debug 值

useEffect(
  () => {
    // componentDidMount
    // 組件掛載時(shí)，可以在這里完成你的任務(wù)
    return () => {
      // componentWillUnmount
      // 卸載時(shí)執(zhí)行，清除 effect
    };
  },
  [ ]
);

這是一個(gè)類似 class 組件中 componentDidMount & componentWillUnmount 兩個(gè)生命周期函數(shù)的寫法。

MyComponent.propTypes = {
  email:      PropTypes.string,
  seats:      PropTypes.number,
  callback:   PropTypes.func,
  isClosed:   PropTypes.bool,
  any:        PropTypes.any
  symbol:     PropTypes.symbol,
}

你可以將屬性聲明為 JS 原生類型，默認(rèn)都是可選的。

MyComponent.propTypes = {
  // 確保這個(gè) prop 沒有被提供時(shí)，會打印警告信息
  requiredFunc: PropTypes.func.isRequired,

  // 任意類型的必需數(shù)據(jù)
  requiredAny: PropTypes.any.isRequired,
}

你可以在任何 PropTypes 屬性后面加上 isRequired。

MyComponent.propTypes = {
  // 只能是特定的值，枚舉類型。
  optionalEnum: PropTypes.oneOf([
    'News', 'Photos'
  ]),
  // 一個(gè)對象可以是幾種類型中的任意一個(gè)類型
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
}

MyComponent.propTypes = {
  // 任何可被渲染的元素
  // (包括數(shù)字、字符串、元素或數(shù)組)
  // (或 Fragment) 也包含這些類型。
  node: PropTypes.node,

  // 一個(gè) React 元素。
  element: PropTypes.element,

  // 一個(gè) React 元素類型（即，MyComponent）
  elementType: PropTypes.elementType,
}

MyComponent.propTypes = {
  // 可以指定一個(gè)對象由某一類型的值組成
  objectOf: PropTypes.objectOf(
    PropTypes.number
  ),
  // 可以指定一個(gè)對象由特定的類型值組成
  objectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  // 帶有額外屬性警告的對象
  objectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),
}

MyComponent.propTypes = {
  custom: (props, propName, compName) => {
    if (!/matchm/.test(props[propName])) {
      // 它在驗(yàn)證失敗時(shí)應(yīng)返回一個(gè) Error 對象
      return new Error(
        '無效的prop `'
        ` \`${propName}\` 提供給` + 
        ` \`${compName}\`。驗(yàn)證失敗。`
      );

    }
  },
}

請不要使用 console.warn 或拋出異常，因?yàn)檫@在 oneOfType 中不會起作用。

MyComponent.propTypes = {
  arr: PropTypes.arrayOf(PropTypes.number),
};

可以指定一個(gè)數(shù)組由某一類型的元素組成

MyComponent.propTypes = {
  message: PropTypes.instanceOf(Message),
};

聲明 message 為類的實(shí)例