react学习总结

我的react爬坑笔记

1. 使用create-react-app执行npm run build时页面空白

// 解决方案
在package.json内增加如下字段
"homepage": "./"

2. 插值符号内不能使用引用类型，否则会报错

3. render方法里return之前和return的数据时机不一样，并且return内必须返回一个闭合标签

render(){
    // 此时a获取的是初始化的数据，而不是更改后的数据
    let a = this.a;
    // return内的a是componentDidMount后的数据
    return (<div>不能为对象等引用类型{a}</div>)
}

4. html字符串转译为html

<div
    id={"List_AD" + this.datas.jsId}
    class="js-ad"
    dangerouslySetInnerHTML={{ __html: this.datas.jsCode }}>
</div>

5. react中对循环的子元素加key可以防止刷新整个dom

6. 移动端输入出现时字体放大的原因：css3媒介查询判断为横屏，使用了横屏的样式

7. State和事件处理

// 正确使用state
//状态更新可能是异步的
// React 可以将多个setState() 调用合并成一个调用来提高性能。
// 因为 this.props 和 this.state 可能是异步更新的，你不应该依靠它们的值来计算下一个状态。
// 要修复它，请使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数：

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

// 事件处理
// 你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
// 如果使用 bind 让你很烦，这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数：
class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

//向事件处理程序传递参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
// 上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

// 值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:
preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }

8.列表渲染

// Keys
// Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识

9.表单

// 多个输入的解决方案
handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

#10. 组合VS继承

// React 具有强大的组合模型，我们建议使用组合而不是继承来复用组件之间的代码。
// 一些组件不能提前知道它们的子组件是什么。这对于 Sidebar 或 Dialog 这类通用容器尤其常见。

// 我们建议这些组件使用 children 属性将子元素直接传递到输出。

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
// 这样做还允许其他组件通过嵌套 JSX 来传递子组件。
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}