云之外
云之外

Some Tips on React

用了大约两天时间，第三次阅读了 React 的 Docs，整理出一些之前没有注意到的 React 的语法与使用原则。随后会附上 Sample Code & Translation.

  1. this.props.children returns nested elements in this element.
    this.props.children 返回 this 中的嵌套标签。

  2. md.render(this.props.children.toString()) converts markdown to HTML Elements. (Plugin: Remarkable)
    md.render(this.props.children.toString()) 可以将 Markdown 转换成 HTML 标签。

  3. JSX prevents injection attacks. It's safe to embed user input in JSX.
    JSX 具备注入保护功能。在 JSX 中嵌入用户输入是安全的。

  4. All React Components must act like pure functions with respect to their props.
    所有的 React 组件 必须表现的像纯函数，并与其属性（ props ）关联。

  5. Class components should always call the base constructor with props.
    类组件必须调用基本构造函数 constructor 并传入 props 参数。

    class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {date: new Date()};
    }
    render() {
        return (
            
    
                
    Hello World!
    
                
    It's {this.state.date.toLocaleTimeString()}.
    
            
    
        );
    }
}

  6. Lifecycle Hooks（生命周期钩子）:

    • Pay attention to componentWillUnmount.
      注意合理使用 componentWillUnmount 函数。（比如解除计时器任务）

  7. If something is not used in render(), it SHOULD NOT be in state.
    在 render() 函数中用不到的东西，不应该出现在 state 里。

  8. this.props or this.state may be updated asynchronously, DO NOT rely on their values for calculating the next state.
    this.props 或者 this.state 可能会被异步更新，所以不要通过他们的值来计算下一个状态的值。

    • One way to meet this need: Use a second form of setState() that accepts a function rather than an object.
      一种符合需求的方法：使用 setState() 的第二种形式，它接收一个函数参数而不是一个对象。

      this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment
}));

  9. React's Data Flow（ React 的数据流）:

    • "Top-Down" or "Unidirectional"
      自顶向下 / 单向数据流
    • Children don't know where data come from.
      子元素并不知道数据的来源。

  10. You CANNNOT return false to prevent default behavior in React. You MUST call preventDefault() explicitly.
    在 React 中，不能通过返回 false 来阻止默认行为。必须显式地调用 preventDefault()函数。

    // Wrong

    Click me


// Right
function ActionLink() {
    function handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');
    }
    return (
        
        Click me
        
    );
}

  11. "this Binding" is necessary to make this work in the callback.
    “this 绑定”的目的是使 this 在回调函数中能正常工作。

    • this.handleClick = this.handleClick.bind(this)

    • In JavaScript, class methods are not bound by default.
      在 JavaScript 中，类方法默认不会绑定。

    • Fix 1: Property Initializer 属性初始化

      handleClick = () => {
    console.log('this is:', this);
}

    • Fix 2 (Not Recommend): Arrow Function 箭头函数

      class LoggingButton extends React.Component {
    handleClick() {
        console.log('this is:', this);
    }

    render() {
    // This syntax ensures `this` is bound within handleClick
        return (
            
        );
    }
}
      • The problem with this syntax is that a different callback is created each time the LoggingButton render. If this callback is passed as a prop to lower components, those components might do an extra re-rendering.

  12. use if conditions to render part of the component.
    使用 if 条件语句控制组件渲染。

    // One Special Format: if statement in JSX
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    
    
      {isLoggedIn ? (
        
      ) : (
        
      )}
    
    
  );
}

  13. return null to hide a component. (Combined with state)
    通过返回 null 隐藏一个组件。

  14. A key should be provided for list items.
    列举元素时，应当为每一个元素提供一个 key。

    • keys help React identify which items have changed, are added, or are removed. keys should be given to the elements inside the array to give the elements a stable identity.
      key可以帮助 React 识别哪一个元素被改动、被添加或者被删除了。 key 应该被置于数组内的标签中，以此提供一个稳定的标识。
    const content = props.posts.map((post) =>
    
    
        
    {post.title}
    
        
    {post.content}
    
    
    
);

  15. keys MUST ONLY be unique among siblings.
    key在兄弟标签之间必须是唯一的。

  16. keys don't get passed to your components.
    key 属性不会传递给组件。

    • To pass them, you need to create a new prop with another name.
      新建一个其它名字的属性保存 key 的值以传递它。

  17. In React, a