„Da die Zeit wie im Flug vergeht, bin ich in diesen Tagen nur noch wenig am aktualisiert. Ich hoffe, dass du gewonnen hast.“ Sei nicht beleidigt, haha! Vor kurzem arbeitet das Unternehmen am Projekt recat.js Ich bin jedoch auch ein Neuling und lerne noch Ich kann sie mir überlassen. Vielen Dank an alle.
2. FunktionenReact ist eine JAVASCRIPT-Bibliothek zum Erstellen von Benutzeroberflächen.
Frameworks.
Datenbindung ist .
<script src="../bower_components/react/react.min.js"></script> <script src="../bower_components/react/react-dom.min.js"></script> <script src="../lib/browser.min.js"></script>
<p id="demo"></p>
<script type="text/babel">
class Hello extends React.Component{
getDate(){
return new Date-0;
}
render(){
var name = this.getDate();
return (
<p>
<p>123</p>
<p>hello,{this.getDate()}</p>
<input type="text"/>
</p>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
Paste_Image.png
Dann werfen wir einen Blick darauf bei dem, was wir nach der Seitenstruktur gerendert haben p für data-recatroot, wir scheinen dieses 
-Attribut
nicht benannt zu haben. Das ist etwas, was recat intern für Sie tut, weil ich auch ein Anfänger bin und es natürlich nicht ganz verstehe Du weißt es, du kannst es mir sagen.
So fügen Sie einige Stile hinzu: Sie können sie auch so hinzufügen.
5. HTML-Strukturcode
Ja, Sie haben es erraten, es ist immer noch dieser Strukturcode, ein einfacher Container
<p id="demo"></p>
在这里我设置的是我在recat 那个render()方法里的一个className的p，为什么叫className，因为class是js里的保留字，所以我们得用className这个属性，而且我们这样写也是设置样式的一种方式。
<style type="text/css">
.demo{
font-size: 50px;
}
</style>下面你要注意我写的render()方法里的东西，还有另外一种设置样式的方式，那就是设置内联样式，为什么不直接设置fontSize:50,backgroundColor:'red',color:'#fff'”？因为recat这里不支持是字符串的形式，要写一个对象，key和value这样的方式，它才可以解析。
<script type="text/babel">
class Hello extends React.Component{
render(){
var name = "刘玉森";
var style={fontSize:50,backgroundColor:'red',color:'#fff'};
return (
<p>
<p className="demo">123</p>
<p style={style}>hello,{name}</p>
<input type="text"/>
</p>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>展示出来之后的结果
Paste_Image.png
props在recat中是很重要的一个方法
Paste_Image.png
这里呢容器没有变，还是那个容器
<p id="demo"></p>
<script type="text/babel">
class Hello extends React.Component{
render(){
return (
<p>
<p>123</p>
<p>hello,{this.props.name}</p>
</p>
)
}
}
class Hello1 extends React.Component{
render(){
return (
<p>
<p>123</p>
<p>hello,{this.props.address}</p>
</p>
)
}
}
class Parent extends React.Component{
render(){
return (
<p>
<Hello name={this.props.name}/>
<Hello1 address={this.props.address}/>
</p>
)
}
}
ReactDOM.render(
<Parent name="刘玉森" address="110"/>,
document.getElementById('demo')
)
</script>这里呢我就得大家说一下我的那个代码，首先呢，我先自定义了一个parent这个标签，然后我创建了一个parent这个组件，我利用this.props把组件外向组件内传值，然后我再创建俩个hello，hello1的组件，获取父元素parent里的值。
看一下页面渲染之后的效果
Paste_Image.png
再看一下页面渲染之后的页面结构
Paste_Image.png
依然还是这个容器
<p id="demo"></p>
<script type="text/babel" >
class Hello extends React.Component{
render(){
return (
<ul>
<li>00000000</li>
{
this.props.children.map(function(item){
return <li>{item}</li>;
})
}
</ul>
)
}
}
ReactDOM.render(
<Hello>
<p>11111111</p>
<p>22222222</p>
<p>33333333</p>
<p>44444444</p>
</Hello>,
document.getElementById('demo')
)
</script>这里呢，我们先写一个li跟我们循环遍历出来的li做个鲜明的对比，这里就利用this.props.children这个方法来读取组件内部的子标签，可以该数组进行遍历
那么我们看下渲染之后的结果
Paste_Image.png
还有我们渲染之后的页面结构
Paste_Image.png
容器......
<p id="demo"></p>
先写一个我遇到的坑
<script type="text/babel" >
class Hello extends React.Component{
getDefaultProps(){
return {
name : "刘玉森"
};
}
render(){
return (
<h1> hello,{this.props.name}</h1>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>这样定义组件你会发现，它不显示，因为使用 Component 定义的组件不能这样去设置默认值
看一下显示的结果
Paste_Image.png
是吧，它不显示，我也是醉了！！！
下面就演示一下正确的写法，下面是见证奇迹的时刻了！
<script type="text/babel" >
class Hello extends React.Component{
render(){
return (
<h1> hello,{this.props.name}</h1>
)
}
}
Hello.defaultProps = {
name : "刘玉森"
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>实践是检验真理的唯一标准，来啊互相伤害啊！看图说话
Paste_Image.png
厉害了，我的哥！就想问还有谁，低调啊，这也是我试出来的,慢慢摸索来的...
容器还是容器
<p id="demo"></p>
在recat里面我们添加一些事件怎么做到呢？
<script type="text/babel">
class Hello extends React.Component{
clkFunc(){
alert('Hello');
}
render(){
return (
<p>
<button onClick={this.clkFunc.bind(this)}>点我</button>
</p>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById('demo')
)
</script>bind这个方法，它是es5里的方法，可以改变this的指向，详细请你自己查询一下，我解释的不是太好。
那么看一下渲染页面之后的结果
GIF.gif
ref标签的属性，可以从组件中获取真实的DOM节点，也可以绑定事件
Paste_Image.png
容器...
<p id="demo"></p>
<script type="text/babel">
class Hello extends React.Component{
clkFunc(){
this.refs.iptText.value = "hello,刘玉森";
}
render(){
return (
<p>
<input ref="iptText" />
<button onClick={this.clkFunc.bind(this)}>点我</button>
</p>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById('demo')
)
</script>看一下渲染之后的结果
GIF.gif
通过ref这个标签的属性来绑定标签，在添加一个点击事件，调用clkFunc这个函数执行里面的语句，然后把值传入input框内，渲染页面。
下面说一下recat的生命周期，在创建到销毁的生命周期，状态和属性在生命周期中是如何流转的？那么首先要了解recat在浏览器中存在的三个状态，分别是mounted、update、unmounted，代表的含义是安装(实例化)、更新(存在期)、销毁(清理)。
timg.jpg
mouted 是指recat components被render这个方法解析生成对应的DOM节点并插入浏览器的DOM结构的一个过程。
update 是指一个mounted的recat components被重新的render的过程
unmounted 是指一个mounted的recat components对应的DOM节点被从DOM结构中移除的这样一个过程
每一个状态recat都封装了对应的hook函数，翻译成中文就是“钩子函数”，WINDOW的消息处理机制为了能在应用程序中监控系统的各种事件消息，提供了挂接各种反调函数(HOOK)的功能。
如果让我们自己封装这样的hook函数，怎么设计封装？相信大多是人都i知道will和did，将要怎么怎么样和已经怎么怎么样，将要mounted、update、unmounted，和已经mounted、update、unmounted，事实上recat的设计思想也是如此，只不过人家比我们想的更加全面一些，更详细一些，那么来一张图片吧
timg.jpg
上容器
<p id="demo"></p>
<script type="text/babel">
class Hello extends React.Component{
constructor(props){
super(props);
this.state = {
opacity:0.1
}
}
componentDidMount(){
this.timer = setInterval(function(){
var opacity = this.state.opacity;
opacity -=0.05;
if(opacity<0.1){
opacity=1
}
this.setState({
opacity:opacity
})
}.bind(this),100)
}
render(){
return (
<p style={{opacity:this.state.opacity,fontSize:50}}>
这个是测试react的生命周期
</p>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>这里我们可以调用两个函数，componentWillMount和componentDidMount的两个方法，这两个函数的区别是componentWillMount在mounting前被调用，componentDidMount在mounted后被调用，然后测试一下recat的生命周期
看一下渲染之后的页面效果是什么样的
GIF.gif
刚才的代码中我有用到state这个方法，这个解释就是说，recat把组件看成状态机getInitialState，设置默认值，setState()可以修改state的值，每次state的值发生改变的时候，都会重新渲染UI
Paste_Image.png
这是这个文件的最后一个容器...
<p id="demo"></p>
<script type="text/babel">
class Hello extends React.Component{
constructor(props){
super(props);
this.state = {
name:'刘玉森',
address:'北京',
}
}
clkFunc(){
this.setState({
name:'liuyusen',
address:'BeJing'
})
}
render(){
return (
<p>
<p>hello,{this.state.name},{this.state.address}!!!</p>
<button onClick={this.clkFunc.bind(this)}>点我</button>
</p>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById('demo')
)
</script>这里我有一个点击按钮，当我点击按钮的时候，改变state的值，props和state差别，props一般情况下我们通过组建调用方，在调用组件的时候指定的，props一旦指定了在一般情况下是不会改变的，而state是私属于当前组件的，state的值是可变的，正所谓“props是专情的，state是花心的”，怎么样修改state的值呢？那么就要用到setState这个方法来修改state的值。
看一下刚才的代码渲染之后的页面效果
GIF.gif
Ich weiß, dass der Artikel, den ich geschrieben habe, möglicherweise nicht sehr gut ist und dass es natürlich auch viele Probleme geben kann kann jedem helfen! ! !
Das obige ist der detaillierte Inhalt vonRecat.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche Münze ist NFT?
Implementierungsmethode der js-Sperrfunktion
So fahren Sie herunter, nachdem Sie den Befehl nohup ausgeführt haben
So wechseln Sie zwischen voller und halber Breite
Datenanalysemethoden
Was ist der Unterschied zwischen RabbitMQ und Kafka?
Was ist der Python-Bereich?
Anforderungen an die Hardwarekonfiguration des Webservers
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
