react知识点-1

• export default 和 export 区别：

    1. export与export default均可用于导出常量、函数、文件、模块等
    2. 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
    3. 在一个文件或模块中，export、import可以有多个，export default仅有一个
    4. 通过export方式导出，在导入时要加{ }，export default则不需要

• 在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。

• 警告：

  因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
  
  例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
  

• React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

• 注意： 组件名称必须以大写字母开头。

  React 会将以小写字母开头的组件视为原生 DOM 标签。
  例如，<div /> 代表 HTML 的 div 标签，而 <Welcome />
  则代表一个组件，并且需在作用域内使用 Welcome。
  

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

• 当 Clock 组件第一次被渲染到 DOM 中的时候，就为其设置一个计时器。这在 React 中被称为“挂载（mount）”。

• 同时，当 DOM 中 Clock 组件被删除的时候，应该清除计时器。这在 React 中被称为“卸载（umount）”。

• componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行

• componentWillUnmount() 生命周期方法中清除组件

• setState写法

 正确；this.setState({
          date: new Date()
        })
 错误：this.setState.date =new Date();

• 正确地使用 State

  • 不要直接修改 State

  • State 的更新可能是异步的

    • 例如，此代码可能会无法更新计数器：

    // Wrong
        this.setState({
          counter: this.state.counter + this.props.increment,
        });
        要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：
        
        // Correct
        this.setState((state, props) => ({
          counter: state.counter + props.increment
        }));
    

  • State 的更新会被合并

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

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

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

• 向事件处理程序传递参数

  • 在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：

  <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
  <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
  

  • 上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

  • 在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

• 在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

• key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值：

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);
上面例子中，Post 组件可以读出 props.id，但是不能读出 props.key。

• 在 React 中，<textarea> 使用 value 属性代替。这样，可以使得使用 <textarea> 的表单和使用单行 input 的表单非常类似
• React 并不会使用 selected 属性，而是在根 select 标签上使用 value 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它
• ES6 计算属性名称的语法更新给定输入名称对应的 state 值

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

var partialState = {};
partialState[name] = value;
this.setState(partialState);

• 在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”
  • 组件中的 this.state.temperature 替换为 this.props.temperature,想更新温度时，需调用 this.props.onTemperatureChange 来更新它，而不再使用 this.setState()。
  • https://react.docschina.org/docs/lifting-state-up.html
• 包含关系
• 这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

• 这使得别的组件可以通过 JSX 嵌套，将任意组件作为子组件传递给它们。{props.children} 渲染在一个 <div> 中，被传递的这些子组件最终都会出现在输出结果中。

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

-少数情况下，你可能需要在一个组件中预留出几个“洞”。这种情况下，我们可以不使用 children，而是自行约定：将所需内容传入 props，并使用相应的 prop。

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}