前端xiyoki
前端xiyoki

React 快速回顾

React Element

基本用法
  • 表示DOM标签的React元素 => const element =
    ;。
  • 表示用户自定义组件的React元素 => const element = ;。
注意事项
  • 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元素上触发。
  • 为组件引用添加事件处理函数 => 事件处理函数作为prop传入组件，由组件内部引用的DOM元素或组件触发抑或作为组件的prop继续向下传递。;
  • 在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属性初始化表单元素（如,