@[toc]
Variables
所见,<img/>
标记的SRC属性值是{logo}放在大括号中,这就是JSX识别变量的方式。
<img src={logo} className="App-logo" alt="logo" />
React将识别{logo},并知道在我们应用程序的第二行中介绍的徽标。然后react将读取此文件并渲染它。让我们尝试设置自己的变量。
在应用程序返回之前,添加const subject='react';
代码现在应该如下所示:
function App() {
const subject = "React";
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
将第8行中的“world”替换为我们自己的变量subject
保存时,浏览器将显示“你好,反应!”,不是“你好,世界!”
变量非常方便,但我们不利用react。
Prop
Prop是传递到react组件中的任何数据。Props写在组件中,并像HTML属性一样写为prop=“value”。让我们打开index.JS并为<app/>添加第一个属性。
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
在<app/>组件中添加一个名为subject的属性,该属性具有Clarice值。
回到 App.js:
function App() {
const subject = "React";
return (
);
}
更改应用程序的函数签名,使其接收props作为参数。
与其他参数一样,可以将props放在控制台日志()中,并将其打印在浏览器中。
把它放在你的主题之后,然后再回来。
function App(props) {
const subject = "React";
console.log(props);
对象的subject属性对应于我们放入app函数签名中的prop,Clarice字符串对应于它的值。react中的组件属性总是以这种方式传递到对象中。
function App(props) {
const subject = props.subject;
return (
现在,主题是我们的道具之一,让我们转到app.JS。使用props主题替换原始的react字符串。如果需要,还可以删除控制台日志。
生命周期
生命周期助于了解组件的运行模式,完成更复杂的组件功能,并分析组件错误的原因
生命周期:组件从创建到安装并在页面上运行,然后在组件不使用时卸载的过程
发送AJAX请求,获取远程数据。处理this绑定问题
class App extends React.Component {
constructor() {
super()
// 初始化state
this.state = {
count: 0
}
//
// const title = document.getElementById('title')
// 此时DOM还没渲染,拿不到DOM
// console.log(title) 结果:null
console.warn('生命周期钩子函数: 1.constructor')
}
componentDidMount() {
// const title = document.getElementById('title')
// 1.此时已经完成DOM渲染,可以拿到DOM,进行DOM操作
// console.log(title)
// 2.
// axios.get('http://api....')
console.warn('生命周期钩子函数: 3.componentDidMount')
}
React支持自定义错误边界组件以捕获具有渲染错误的子组件。
如果在react组件中定义了两个生命周期方法static getderivedstatefromerror()或componentdidcatch()中的任何一个(或两个),它将成为错误边界。当抛出错误时,您可以在getderivedstatefromerror()端更改状态变量,以控制备用UI的呈现,并在componentdidcatch()方法中打印错误信息。
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
渲染时,将重新生成虚拟DOM,但在重新渲染UI时,react将仅重新渲染虚拟DOM的更改部分。渲染后,虚拟DOM中输入的值属性值实际上会发生变化,但与不同。输入在实际DOM中的值,因此它不会呈现到UI。
var HelloMessage = React.createClass({
render: function() {
return <h1>
Hello {this.props.name}
</h1><p>
some text
</p>;
}
});
另外,可以将ref=“mytextinput”添加到输入和添加控制台。登录handlechange(this.Refs[“mytextinput”].Props);打印虚拟DOM的属性值以发现秘密。
DOM节点
组件不是真正的DOM节点,而是内存中存在的数据结构,称为虚拟DOM。只有当它被插入到文档中时,它才会成为真正的dom。根据react的设计,所有DOM更改将首先发生在虚拟DOM上,然后实际更改将反映在真实DOM上。这种算法称为DOM-diff,它可以极大地提高网页的性能。
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
nemes.map(function(name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
)
React为每个状态提供两个处理功能。在进入状态之前调用will函数,在进入状态之后调用did函数。三种状态下有五种处理功能。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object, nextProps, object nextState)
- componentDidUpdate(object, prevProps, object prevState)
- componentWillUnmount()
Mounting:已插入真实DOM
Updating:正在被重新渲染
Unmounting:已移出真实DOM
state和render
状态属性包含定义组件所需的一些数据。当数据更改时,将调用render来再现渲染。只能通过setstate方法更新数据。