React 快速回顾

React Element

基本用法

• 表示DOM标签的React元素 => const element = <div />;。
• 表示用户自定义组件的React元素 => const element = <Welcome name="Sara" />;。

注意事项

• React元素是纯对象，创建十分便宜。
• React元素是不可变的。创建元素后，你不能更改其子元素或属性。
• 在实践中，大多数React应用程序只调用一次ReactDOM.render()。

components

基本用法

• 组件要先声明，然后才能被引用，且组件以React元素的形式被引用。
• 组件接受props，并返回表示DOM标签或表示用户自定义组件的React元素，或二者的嵌套。若返回表示用户自定义组件的React元素就意味着对其它组件的引用。
• 在极少的情况下，你可能希望组件隐藏自身，即使它已由另一个组件渲染。在组件声明中，通过返回null而不是返回渲染输出，即可隐藏组件自身。return null;
• 组件要么被声明为Functional Components，要么被声明为Class Components，二者只能选其一，后者功能更强大，更常用。
• 在Class Components的内部使用this.props的形式直接访问props对象中的数据。

注意事项

• 在声明组件时，始终以大写字母作为组件名的开头。
• 组件必须返回一个唯一的根元素。

props

基本用法

• 当React遇到组件引用时，它将JSX属性作为单个对象传递给此组件。我们称这个对象为‘props’。
• 建议从组件自己的角度来命名prop，而不是它的上下文。

注意事项

• 不论你是通过函数的方式，还是类的方式声明一个组件，组件绝不能修改自己的props。

state

基本用法

• 初始化this.state的值 => 只能在类组件的constructor方法体中初始化this.state。
• 更改this.state的值 => 只能通过调用this.setState()方法来更改this.state的值。
• 引用this.state的值 =>
• 组件可以将其state当作props向下传递。
• 根据this.state的值进行条件渲染。
• 将this.state的值用作React元素的属性值。属性值会随this.state值的变化而变化。
• 由于this.props和this.state可能会被异步更新，因此不应当（以同步编码的方式）依赖它们的值来计算下一个state => 取而代之的是（以异步编码的方式）向this.setState()传递一个函数，该函数接收先前的state作为第一个参数（prevState），接收状态更新时的props作为第二个参数（props）。this.setState((prevState, props) => ({counter: prevState.counter + props.increment }));

注意事项

• 可以引用this.state的值，但不能为其直接赋值。
• 如果一些数据没有在render()中使用，那么这些数据就不应该出现在state中。
• 在React中，可变的状态通常保存在组件的state属性上，并且只能通过setState()方法进行更新。
• 组件的状态除了拥有和设置它的组件外，其它任何组件都不能访问它。

lifecycle hooks

注意事项

• 在组件的输出（组件返回的React元素）已被渲染到DOM上后，componentDidMount()运行。
• 从组件的render方法中返回null，并不会影响组件生命周期方法的触发。例如，componentWillUpdate和componentDidUpdate依然会被调用。

refs

基本用法

• （在引用HTML元素时）在HTML元素上使用ref属性 => 将DOM元素引用赋给类属性。ref={input => this.textInput = input}
• （在引用类组件时）在类组件上使用ref属性 => 将已mounted的组件实例赋给类属性。ref={input => this.textInput = input}
• （在引用功能组件时）不能在功能组件上使用ref属，但（在功能组件内部引用HTML元素或类组件时）可以在功能组件内部的HTML元素或类组件上使用ref属性 => 将DOM元素引用或已mounted的组件实例赋给局部变量。let textInput = null; ``ref={input => textInput = input; }`

注意事项

ref 回调比componentDidMount更早调用。

React Event

基本用法

• 为React元素添加事件处理函数：
• 为DOM元素引用添加事件处理函数 => 事件直接在DOM元素上触发。<button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'}</button>
• 为组件引用添加事件处理函数 => 事件处理函数作为prop传入组件，由组件内部引用的DOM元素或组件触发抑或作为组件的prop继续向下传递。<LogoutButton onClick={this.handleLogoutClick} />; <button onClick={props.onClick}>Logout</button>
• 在React中你不能通过返回false来阻止默认行为。你必须在事件处理函数中明确调用preventDefault。e.preventDefault();这里的e是合成的事件。React根据W3C规范定义了这些合成事件，所有你不必担心跨浏览器的兼容性。
• 在React元素开始渲染时为其添加监听程序。
• 在类的constructor方法体中将事件处理函数中的this绑定到类组件实例。this.handleClick = this.handleClick.bind(this);

注意事项

• React事件使用camelCase命名，而不是小写命名。
• 使用JSX传递一个函数作为事件处理程序，不能是一个字符串。

Lists

基本用法

• 使用数组的遍历方法（如map()，forEach()，并为其传入匿名函数）构建元素集，并用花括号{}将元素集include到JSX中。
• 元素集中的每项既可以是代表DOM标签的React元素，也可以是代表用户自定义组件的React元素。
• 必须为元素集中的每项添加key属性，属性值为字符串，key属性用于唯一标识每项。
• Key在React中起着提示的作用，但它们不会被传递给组件。如果你需要在组件中使用相同的值，则使用不同的名称显式地将该值作为props传递。

Form

基本用法

• 创建受控组件：
• 通过设置组件的state属性初始化表单元素（如<input type="text">,<textarea>以及<select>）的可变状态。this.state = {value: ''};;<input type="text" value={this.state.value} />
• 将表单元素实时更新的可变状态同步更新到组件的state属性，并更新UI:
  • handleChange(event) {this.setState({value: event.target.value});}
  • input标签：<input type="text" value={this.state.value} onChange={this.handleChange} />
  • select标签：<select value={this.state.value} onChange={this.handleChange}>
• 当你需要处理多个受控的input元素，你可以为每个元素添加一个name属性，让处理函数基于event.target.name的属性值来选择后续该做什么。

Lifting State Up

基本用法

1. 在父组件上设置共享state，子组件上不设置。
2. 将父组件上的共享state作为prop向下传递给子组件，初始化子组件的状态。
3. 将父组件中的onChange处理程序作为prop向下传递到子组件对应事件处理程序中并由其调用，并将表单元素实时更新的可变状态作为参数传入，以同步更新父组件中的状态。handleChange(e) {this.props.onChange(e.target.value);}

children

基本用法

• 在引用组件时，React会将组件开闭标签间的所有内容都作为children prop向下传递。