"As time goes by in a hurry, I only care about you." Recently, I haven't updated the article very much. I hope you won't be offended, haha! Recently, the company is working on the recat.js project. However, I am not very familiar with it. I am also a novice and am still learning. However, if you have any good learning documents, you can leave them to me. Thank you all.
2. FeaturesReact is a JAVASCRIPT library for building user interfaces.
frameworks.
Data binding simpler.
##Paste_Image.png
, bindeventwait
<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>. From the perspective of recat, it is just an instance of recat Components. So how do these recat Components appear on the page? It is to call the render() method in recat. The first parameter is the recat Components we want to render. The second parameter The parameter Components is the container element at the position to be inserted after rendering. In summary, the rendering result of hello is inserted into the element container with the ID of demo. Then let’s take a look at the rendering result
Paste_Image.png
Then let’s take a look at the rendering result Page structure
Paste_Image.png
attribute
. This is something recat does internally for you, because I am also a beginner and don’t quite understand it. Of course, if you know it, you can tell me. How to add some styles, you can also add them like this.
5. HTML structure code
<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
I know that the article I wrote may not be very good, and there may be many problems. Of course, I also need your guidance. Finally, I hope that the article I wrote can bring help to everyone! ! !
The above is the detailed content of Recat.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
