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
基本用法
- 在父组件上设置共享state，子组件上不设置。
- 将父组件上的共享state作为prop向下传递给子组件，初始化子组件的状态。
- 将父组件中的onChange处理程序作为prop向下传递到子组件对应事件处理程序中并由其调用，并将表单元素实时更新的可变状态作为参数传入，以同步更新父组件中的状态。
handleChange(e) {this.props.onChange(e.target.value);}
children
基本用法
- 在引用组件时，React会将组件开闭标签间的所有内容都作为children prop向下传递。
网友评论