组件是React应用程序UI的构建块。
这些组件将整个UI分割成独立的、可重用的小块。
然后，它呈现每个独立的组件，而不影响UI的其余部分。
每个React组件必须强制拥有一个render()。它返回一个单一的React元素，该元素表示本机DOM组件。如果需要呈现多个HTML元素，则必须将它们分组在一个封闭标记内，如<form>、<group>、<div>等。
这个函数必须保持纯，也就是说，它必须在每次调用时返回相同的结果。
我们可以通过以下方式将组件嵌入其中：
class MyComponent extends React.Component{
render(){
return(
<div>
<h1>Hello</h1>
<Header/>
</div>
);
}
}
class Header extends React.Component{
render(){
return
<h1>Header Component</h1>
};
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
Props是React中的属性的简写。
它们是只读组件，必须保持纯粹，即不可变。
它们总是在整个应用程序中从父组件传递到子组件。
子组件永远不能将一个道具发送回父组件。
这有助于维护单向数据流，通常用于呈现动态生成的数据。
状态是React组件的核心。
状态是数据的来源，必须尽可能保持简单。
基本上，状态是决定组件呈现和行为的对象。
与道具不同，它们是可变的，可以创建动态的和交互式的组件。
它们通过this.state()访问。
|
条件
|
State
|
Props
|
|
从父组件接收初始值
|
Yes
|
Yes
|
|
父组件可以更改值
|
No
|
Yes
|
|
设置组件内部的默认值
|
Yes
|
Yes
|
|
组件内部更改
|
Yes
|
No
|
|
设置子组件的初始值
|
Yes
|
Yes
|
|
子组件内部的更改
|
Yes
|
No
|
可以使用this.setState()更新组件的状态。
class MyComponent extends React.Component {
constructor() {
super();
this.state = {
name: 'Maxx',
id: '101'
}
}
render()
{
setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
return (
<div>
<h1>Hello {this.state.name}</h1>
<h2>Your Id is {this.state.id}</h2>
</div>
);
}
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
它是如何使用的？
箭头函数是编写函数表达式的简短语法。
这些函数允许正确地绑定组件的上下文，因为在ES6中自动绑定在缺省情况下不可用。当处理高阶函数时，箭头函数是最有用的。
//General way
render() {
return(
<MyInput onChange={this.handleChange.bind(this) } />
);
}
//With Arrow Function
render() {
return(
<MyInput onChange={ (e) => this.handleOnChange(e) } />
);
}
|
有状态组件
|
无状态组件
|
|
在内存中存储组件的状态信息
|
计算组件内部的状态
|
|
有权更改组件状态
|
无权更改组件状态
|
|
包含过去、当前以及可能更改信息
|
包括过去、当前以及可能更改的信息
|
|
无状态组件通知他们关于状态更改的需求，然后将props发给他们
|
从有状态组件接收props，并作为回调函数
|
React组件的生命周期分为三个不同的阶段：
初始呈现阶段：这是组件即将开始其生命旅程并到达DOM的阶段。
更新阶段：一旦将组件添加到DOM中，它可能只在发生道具或状态更改时才更新和重新呈现。
这只发生在这个阶段。
卸载阶段：这是组件生命周期的最后一个阶段，在这个阶段组件被销毁并从DOM中删除。
一些最重要的生命周期方法是：
componentWillMount()——在呈现之前在客户端和服务器端执行。
componentDidMount()——仅在第一次呈现之后在客户端执行。
componentWillReceiveProps()——在从父类接收到道具并调用另一个呈现之前调用。
shouldComponentUpdate()——根据某些条件返回真值或假值。
如果希望组件更新，则返回true，否则返回false。
默认情况下，它返回false。
componentWillUpdate()——在DOM中进行呈现之前调用。
componentDidUpdate()——在呈现发生后立即调用。
componentWillUnmount()——在从DOM卸载组件后调用。
它用于清除内存空间。
在React中，事件是对鼠标悬停、鼠标点击、按键等特定操作的触发反应。
处理这些事件类似于处理DOM元素中的事件。
但是有一些语法上的差异，比如：
事件的命名使用大小写而不是小写。
事件作为函数而不是字符串传递。
event参数包含一组特定于事件的属性。
每个事件类型都包含其自己的属性和行为，只能通过其事件处理程序访问这些属性和行为。
class Display extends React.Component({
show(evt) {
// code
},
render() {
// Render the div with an onClick prop (value is a function)
return (
<div onClick={this.show}>Click Me!</div>
);
}
});
合成事件是充当浏览器原生事件的跨浏览器包装器的对象。
它们将不同浏览器的行为合并到一个API中。
这样做是为了确保事件在不同的浏览器之间显示一致的属性。
refs是React中References的简写。
它是一个属性，有助于存储对特定React元素或组件的引用，这些引用将由组件呈现配置函数返回。
它用于返回对render()返回的特定元素或组件的引用。
当我们需要DOM度量或向组件添加方法时，它们就派上用场了。
class ReferenceDemo extends React.Component{
display() {
const name = this.inputDemo.value;
document.getElementById('disp').innerHTML = name;
}
render() {
return(
<div>
Name: <input type="text" ref={input => this.inputDemo = input} />
<button name="Click" onClick={this.display}>Click</button>
<h2>Hello <span id="disp"></span> !!!</h2>
</div>
);
}
}
以下是应使用ref的情况：
需要管理焦点时，请选择文本或媒体播放
触发命令动画
与第三方DOM库集成
我们可以通过使用导出和导入属性来模块化代码。
它们有助于在不同的文件中分别编写组件。
//ChildComponent.jsx
export default class ChildComponent extends React.Component {
render() {
return(
<div>
<h1>This is a child component</h1>
</div>
);
}
}
//ParentComponent.jsx
import ChildComponent from './childcomponent.js';
class ParentComponent extends React.Component {
render() {
return(
<div>
<App />
</div>
);
}
}
React表单类似于HTML表单。
但是在React中，状态包含在组件的状态属性中，仅通过setState()更新。
因此，元素不能直接更新它们的状态，它们的提交由JavaScript函数处理。
这个函数可以完全访问用户在表单中输入的数据。
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleSubmit} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
|
受控组件
|
非受控组件
|
|
不维护自己的状态
|
维护自己的状态
|
|
数据由父组件控制
|
数据由DOM控制
|
|
通过props获取当前值，通过callbacks回调
|
使用ref通知更改当前值
|
高阶组件是重用组件逻辑的一种先进方法。基本上，这是一个模式，从反应的组成性质。
HOC是将另一个组件封装在其中的自定义组件。它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。
你可以说HOC是“纯粹的”组件。
HOC可用于许多任务，如：
代码重用、逻辑和引导抽象
呈现高顶
状态抽象和操作
props操作
纯组件是可以编写的最简单和最快的组件。
它们可以替换任何只有render()的组件。
这些组件增强了代码的简单性和应用程序的性能。
键用于标识惟一的虚拟DOM元素，它们的相应数据驱动UI。
它们通过回收DOM中所有现有元素来帮助优化呈现。
这些键必须是唯一的数字或字符串，使用它们只会重新排序元素，而不是重新呈现它们，这将提高应用程序的性能。