<select value={this.state.value} onChange={this.handleChange}>
  {somearray.map((element) => (
    <option value={element.value}>{element.text}</option>
  ))}
</select>

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

constructor(props) {
  super();
  console.log(this.props); // undefined
  console.log(props); // defined
}

constructor(props) {
  super(props);
  console.log(this.props); // props will get logged.
}

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

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

componentDidUpdate(prevProps, prevState, snapshot);

static getDerivedStateFromProps(nextProps, prevState){
    if (nextProps.currentRow === prevState.lastRow){
        return null;
    }
    return {
        lastRow: nextProps.currentRow,
        isScrollingDown: nextProps.currentRow > prevState.lastRow
    }
}

class VideoPlayer extends React.Component {
  constructor() {
    super();
    this.state = {
      isPlaying: false,
    };
    this.handleVideoClick = this.handleVideoClick.bind(this);
  }

  handleVideoClick() {
    if (this.state.isPlaying) {
      this.video.pause();
    } else {
      this.video.play();
    }
    this.setState({ isPlaying: !this.state.isPlaying });
  }

  render() {
    return (
      <div>
        <video
          ref={(video) => (this.video = video)}
          onClick={this.handleVideoClick}
        >
          <source src="some.url" type="video/ogg" />
        </video>
      </div>
    );
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

render() {
// React 并不会创建新的 div，而是将其渲染到指定的 DOM 节点中
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  this.setState({ eventType: event.type });
}

<div onClickCapture={this.handleClickViaCapturing}>
  <button onClick={this.handleClick}>
    Click me, and my parent's `onClickCapture` will fire *first*!
  </button>
</div>

import cx from "classnames";
import styles from "./capsule.css";

// 使用 classnames
let className = cx(styles.base, {
  [styles.clickable]: this.props.clickable,
  [styles.withIcon]: !!this.props.icon,
});
return <div className={className} />;

// 使用朴素的数组操作
return (
  <div
    classNames={[styles.base, styles.clickable, styles.withIcon].join(" ")}
  />
);

import Transition from "react-transition-group/Transition";

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
};

const transitionStyles = {
  entering: { opacity: 0 },
  entered: { opacity: 1 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div
        style={{
          ...defaultStyle,
          ...transitionStyles[state],
        }}
      >
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

<CSSTransition
  in={showValidationMessage}
  timeout={300}
  classNames="message"
  unmountOnExit
  onExited={() => {
    this.setState({
      showValidationButton: true,
    });
  }}
>
  {(state) => (
    <HelpBlock>
      Your name rocks!
      <CSSTransition
        in={state === "entered"}
        timeout={300}
        classNames="star"
        unmountOnExit
      >
        <div className="star">⭐</div>
      </CSSTransition>
    </HelpBlock>
  )}
</CSSTransition>

classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter,
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit,
}}

import PropTypes from "prop-types";

MyComponent.propTypes = {
  // 指定类实例
  optionalMessage: PropTypes.instanceOf(Message), // 枚举类型

  optionalEnum: PropTypes.oneOf(["News", "Photos"]), // 可能为多种类型

  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message),
  ]), // 包含指定类型的数组

  optionalArrayOf: PropTypes.arrayOf(PropTypes.number), // 包含指定值类型的对象

  optionalObjectOf: PropTypes.objectOf(PropTypes.number), // 某个具体形状的对象

  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number,
  }),

  // ...
};

// 复制某个元素
React.cloneElement(element, [props], [...children]);

// 从某个组件类或者类型中创建元素
React.createElement(type, [props], [...children]);

// 转换子元素
React.Children.map(children, function[(thisArg)])

// 遍历子元素
React.Children.forEach(children, function[(thisArg)])

// 如果仅有单个子元素，则返回
React.Children.only(children)

// 忽略首个元素
{
  React.Children.map(children, (child, i) => {
    // Ignore the first child
    if (i < 1) return;
    return child;
  });
}

// 即使传入的是函数，也能够正常执行
<IgnoreFirstChild>
  {() => <h1>First</h1>} // <- Ignored 💪
</IgnoreFirstChild>

// Renders "3"
<ChildrenCounter>
  {() => <h1>First!</h1>}
  Second!
  <p>Third!</p>
</ChildrenCounter>

class Sort extends React.Component {
  render() {
    const children = React.Children.toArray(this.props.children);
    // Sort and render the children
    return <p>{children.sort().join(" ")}</p>;
  }
}

<Sort>
  // We use expression containers to make sure our strings // are passed as
  three children, not as one string
  {"bananas"}
  {"oranges"}
  {"apples"}
</Sort>;

class Executioner extends React.Component {
  render() {
    return React.Children.only(this.props.children)();
  }
}

renderChildren() {
  return React.Children.map(this.props.children, child => {
    return React.cloneElement(child, {
      name: this.props.name
    })
  })
}

// 先获取元素下标，然后执行删除
const array = [...this.state.people]; // make a separate copy of the array
const index = array.indexOf(e.target.value);
array.splice(index, 1);

// 使用 filter 进行过滤删除

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  array.splice(index, 1);
  this.setState({people: array});
},

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) {
        return person !== e.target.value
    })};
}

async componentDidMount() {
  try {
    const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`);
    if (!response.ok) {
      throw Error(response.statusText);
    }
    const json = await response.json();
    this.setState({ data: json });
  } catch (error) {
    console.log(error);
  }
}

    render() {
        return (
            <input />
        )
    }

  handleChange: function (propertyName, event) {
    const contact = this.state.contact;
    contact[propertyName] = event.target.value;
    this.setState({ contact: contact });
  },
  render: function () {
    return (
      <div>
        <input type="text" onChange={this.handleChange.bind(this, 'firstName')} value={this.state.contact.firstName}/>
        <input type="text" onChange={this.handleChange.bind(this, 'lastName')} value={this.state.contact.lastName}/>
        <input type="text" onChange={this.handleChange.bind(this, 'phone')} value={this.state.contact.lastName}/>
      </div>
    );
  }

const ThemeContext = React.createContext("light");

class ThemeProvider extends React.Component {
  state = { theme: "light" };

  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {(theme) => <Button theme={theme} />}
      </ThemeContext.Consumer>
    );
  }
}

class MyClass extends React.Component {
  // 或者在类外声明
  static contextType = MyContext;

  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* render something based on the value of MyContext */
  }
}

MyClass.contextType = MyContext;

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }} />
  )} />
)

<PrivateRoute path='/protected' component={Protected} />

<StrictMode>
  <App />
</StrictMode>

class MyComponent extends React.Component {
  state = {
    Bar: null,
  };

  componentWillMount() {
    import("./components/Bar").then((Bar) => {
      this.setState({ Bar });
    });
  }

  render() {
    let { Bar } = this.state;
    if (!Bar) {
      return <div>Loading...</div>;
    } else {
      return <Bar />;
    }
  }
}

import Loadable from "react-loadable";

const LoadableBar = Loadable({
  loader: () => import("./components/Bar"),
  loading() {
    return <div>Loading...</div>;
  },
});

class MyComponent extends React.Component {
  render() {
    return <LoadableBar />;
  }
}

import * as React from "react";
import formatPrice from "../utils/formatPrice";

export interface IPriceProps {
  num: number;
  symbol: "$" | "€" | "£";
}

const Price: React.SFC<IPriceProps> = ({ num, symbol }: IPriceProps) => (
  <div>
    <h3>{formatPrice(num, symbol)}</h3>
  </div>
);

export function positionStyle<T>(
  Component: React.ComponentType
): React.StatelessComponent<T & { left: number; top: number }> {
  return (props: any) => {
    const { top, left, ...rest } = props;
    return (
      <div style={{ position: "absolute", top, left }}>
        <Component {...rest} />
      </div>
    );
  };
}

export interface Connect {
  ...
    <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
      mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
      mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
  ): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;
  ...
}

export declare const connect: Connect;