HeroMeikong
HeroMeikong

React 官网笔记 更新于：2020-12-15

React 官网学习笔记

  1. 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

  2. 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault

    function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    
      Click me
    
  );
}

  3. 当你的函数需要传旨的时候，你应该绑定 this：

    class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      
    );
  }
}

    你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

    为什么绑定很必要的？

    obj.method();

var method = obj.method;
method();
//两个不一样

例子:
const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX());// undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // 42let
// this 的指定不对
bind方法确保了第二种写法与第一种写法相同

    不使用 bind 方法一：public class fields 语法

    class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      
    );
  }
}

    不使用 bind 方法二：箭头函数

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

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      
    );
  }
}

  4. 向事件处理程序传递参数

    # 箭头函数，e 在指定位置传值

# Function.prototype.bind，注意第一个值this|null 这里是不会传递的，e 在末尾传值

  5. 简单条件渲染
    注意：使用函数直接传值，使用组件则通过对象(props)传值

    function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return ;
  }
  return ;
}

function Greeting1(isLoggedIn) {
  if (isLoggedIn) {
    return ;
  }
  return ;
}

ReactDOM.render(
  // this.Greeting1(false),
  ,
  document.getElementById('root')
);

  6. 当使用 function() {} + bind() 结合时，推荐写法：

    class LoginControl extends React.Component {
  constructor(props) {
    super(props);
      this.handleLoginClick = this.handleLoginClick.bind(this);
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  render() {
    // 不推荐写在这里 this.handleLoginClick = this.handleLoginClick.bind(this);
    // 注意：在 render 方法中使用 Function.prototype.bind 会在每次组件渲染时创建一个新的函数，可能会影响性能
    return (
      
    
        
      
    
    );
  }
}

  7. 阻止组件渲染可以这样：

    function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    
    
      Warning!
    
    
  );
}

  8. 如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。

  9. 在 map() 方法中的元素需要设置 key 属性:

    const listItems = numbers.map((number) =>
  // 正确！key 应该在数组的上下文中被指定
  
);

  10. key 会传递信息给 React ，但不会传递给你的组件。组件可以读出 props.id，但是不能读出 props.key

  11. 表单元素：、