掌握React的基本使用，重塑前端开发

[pluscai]

1. Handling Events

Html中处理添加事件：

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

React中：

function ActionLink() {
  function handleClick(e) { 
      e.preventDefault();  
      console.log('The link was clicked.');  
  }
  return (
    <a href="#" onClick={handleClick}> Click me </a>
  );
}

2. Conditional Rendering

• 根据不同条件，渲染不同的组件

• 如果组件的返回值为null，则不渲染该组件

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

3. Lists and Keys

React中渲染列表，简单粗暴：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

That it is! cool!

注意遍历时要给element加key属性，否则控制台会报警告。

4. Forms

An input form element whose value is controlled by React in this way is called a “controlled component”

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

input,textarea,select都是以上述的方式被React控制的：value={this.state,value} onChange={this.handleChange}

5. Lifting State Up

将多个组件共享的数据提升至 离这些组件最近的共同父组件中进行管理。

There should be a single “source of truth” for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the top-down data flow.

官网demo是个非常好的例子：

6. Composition vs Inheritance

Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

React的组件的composition和props组合起来用，而不是用继承，如下demo：

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

7. Thinking In React

React change the way that Web apps should be build.

UI -> Web apps 四步：

1. Break The UI Into A Component Hierarchy

   将UI结构拆解成组件结构

2. Build A Static Version in React

   It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing.

   这个阶段用不到state

3. Identify The Minimal (but complete) Representation Of UI State

   找到state,即交互中哪些数据会改变

4. Identify Where Your State Should Live

   将state放到合适的组件中维护

5. Add Inverse Data Flow

   如果有反向数据流，即子组件影响父组件内的状态，传回调函数给子组件去影响父组件的值