【React】基础笔记

JSX

1.你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。

2.推荐在 JSX 代码的外面扩上一个小括号，这样可以防止 分号自动插入 的 bug。

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

3.在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象,所以使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可 以

4.用小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

元素渲染

1.React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

组件&props

1. 组件名称必须要大写

2.组件类只能包含一个顶层标签，否则也会报错

3. 组件定义可以采用函数还有类

State & 生命周期

1.生命周期函数: componentDidMount() 和 componentWillUnmount()

2.通过setState()函数更新状态，状态改变后，react就会重新调用render()方法渲染界面

3. 3-1 状态更新可能异步，使用 setState() 来接受一个函数而不是一个对象；

    3-2 不要直接更新状态 ，使用 setState()

 3-3 数据自顶项下流动 

事件处理

1.绑定事件格式

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

2.你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

3.类函数绑定this方式  ， arrow functions 和 Function.prototype.bind

条件渲染

1.与运算符 &&，可以通过用花括号包裹代码在 JSX 中嵌入任何表达式

2.是因为在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。

3.阻让 render 方法返回 null  ，可以阻止组件渲染; 组件没有渲染，但是生命周期方法一样可以执行;

列表&Keys

1. 元素的key只有在它和它的兄弟节点对比时才有意义 ,比方说，如果你提取出一个ListItem组件，你应该把key保存在数组中的这个<ListItem />元素上，而不是放在ListItem组件中的<li>元素上。

2. key会作为给React的提示，但不会传递给你的组件。如果您的组件中需要使用和key相同的值，请将其作为属性传递

3. JSX允许在大括号中嵌入任何表达式

表单

1. 受控组件 的形式

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }


  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label> 
      </form>
    );
  }
}

2. select 标签中，并不使用selected属性，而在根select标签上用value属性来表示选中项。

3.多舒服解决办法，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。

 handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

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

状态提升

1.使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。

包含关系

1.组件使用 children 属性将子元素直接传递到输出。

React理念

1. 静态模型只需要props: props 是一种从父级向子级传递数据的方法;

    静态模型需要交互时用state: State 只在交互的时候使用，即随时间变化的数据

2.在较为简单的例子中，通常自顶向下更容易，而在较大的项目中，自底向上会更容易并且在你构建的时候有利于编写测试。

3. 判断state需要考虑三个问题:

    3-1：它是通过 props 从父级传来的吗？如果是，他可能不是 state。

    3-2： 它随着时间推移不变吗？如果是，它可能不是 state。

    3-3：你能够根据组件中任何其他的 state 或 props 把它计算出来吗？如果是，它不是 state。

4.定位state放在哪里，找到一个公共所有者组件(一个在层级上高于所有其他需要这个 state 的组件的组件);