读书笔记：React Docs（完）

[nuysoft]

React

参考资源

• React Docs
• React 入门教程

基本概念

1. jsx ≈ template
2. props ≈ options
3. state ≈ data
4. <input type="text" value={this.state.value} onChange={this.handleChange} />

核心 API

ReactDOM

// mounting
ReactDOM.render(
  element,
  container,
  [callback]
)

// unmounting
ReactDOM.unmountComponentAtNode(container)

ReactDOM.findDOMNode(component)

最佳实践 Best Practices

• 构建流水线 Build Pipeline
  • Package Manager: Yarn or npm
  • Bundler: webpack or Browserify
  • Compiler: Babel
• 模板 Template
  • JSX
• 组件输入 Input
  • props
• 组件数据 Data
  • state
• 组件之间通信 Inter-Component Communication / 单向数据流 Unidirectional Data Flow
  • one-way data
  • parent -> child: props
  • child -> parent: event
• Flux
  • Redux

JSX

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// =>
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

参考：

• WTF is JSX

Components and Props

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

Extracting Components

1. Be used several times
2. Be complex enough

Props are Read-Only

All React components must act like pure functions with respect to their props.

State

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  tick() {
    this.setState({
      date: new Date()
    });
  }
}

setState(nextState, callback)

setState(nextState, callback)

this.setState({mykey: 'my new value'});

this.setState((prevState, props) => {
  return {myInteger: prevState.myInteger + props.step};
});

Using State Correctly

• Do Not Modify State Directly
• State Updates May Be Asynchronous
• State Updates are Merged

Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.

Event

• React events are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.

<button onClick={activateLasers}>
  Activate Lasers
</button>

Forms

Controlled Components

<form>
  <input type="text" value={this.state.value} onChange={this.handleChange} />
  <textarea value={this.state.value} onChange={this.handleChange} />
  <select value={this.state.value} onChange={this.handleChange}></select>
</form>

Uncontrolled Components

handleSubmit(event) {
  alert('A name was submitted: ' + this.input.value);
  event.preventDefault();
}
<input
  defaultValue="Bob"
  type="text"
  ref={(input) => this.input = input} />

Thinking in React

Step 1: Break The UI Into A Component Hierarchy

Single Responsibility Principle: A component should ideally only do one thing.

Step 2: Build A Static Version in React

Don't use state at all to build this static version.
You can build top-down or bottom-up. In simpler examples, it's usually easier to go top-down, and on larger projects, it's easier to go bottom-up and write tests as you build.

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

DRY: Don't Repeat Yourself.

• Is it passed in from a parent via props? If so, it probably isn't state.
• Does it remain unchanged over time? If so, it probably isn't state.
• Can you compute it based on any other state or props in your component? If so, it isn't state.

Step 4: Identify Where Your State Should Live

• Identify every component that renders something based on that state.
• Find a common owner component (a single component above all the components that need the state in the hierarchy).
• Either the common owner or another component higher up in the hierarchy should own the state.
• If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.

Step 5: Add Inverse Data Flow

  handleChange() {
    this.props.onUserInput(
      this.filterTextInput.value,
      this.inStockOnlyInput.checked
    );
  }

<input
  type="text"
  placeholder="Search..."
  value={this.props.filterText}
  ref={(input) => this.filterTextInput = input}
  onChange={this.handleChange}
/>

SOLID

面向对象设计五个基本原则 SOLID：

1. 单一职责原则 一个类应该只有一个发生变化的原因。
2. 开闭原则 对于扩展是开放的，对于修改是关闭的。
3. 接口隔离原则 客户端不应该依赖它不需要的接口；一个类对另一个类的依赖应该建立在最小的接口上。
4. 里氏替换原则 当一个子类的实例应该能够替换任何其超类的实例时，它们之间才具有 is-A 关系。
5. 依赖倒置原则
   1. 高层模块不应该依赖于低层模块，二者都应该依赖于抽象。
   2. 抽象不应该依赖于细节，细节应该依赖于抽象。

参考：

• 面向对象设计的SOLID原则
• SOLID Development Principles – In Motivational PicturesPosted

Yarn vs npm

• Offline Mode
• Deterministic
• Network Performance
• Same Packages
• Network Resilience
• Flat Mode

Higher-Order Components

• Use HOCs For Cross-Cutting Concerns
• Don't Mutate the Original Component. Use Composition.
• Convention: Pass Unrelated Props Through to the Wrapped Component
• Convention: Maximizing Composability
• Convention: Wrap the Display Name for Easy Debugging
• Caveats: Don't Use HOCs Inside the render Method
• Caveats: Static Methods Must Be Copied Over
• Caveats: Refs Aren't Passed Through

总结

• 组件化的价值除了复用，还有方便维护。
• 声明式编码很直观
• 单向数据流很省心