中秋过后刚好结束在上一家公司的工作,明天开始要正式的找工作了，最近也投了几家公司收到几分面试邀请。在面试的过程中几个面试官聊到了react(当然也有聊了vue,angular)。感觉不懂react都不好意思找前端的工作了,其实我本人对react还是很有好感的无论是jsx还是对es6友好的支持都很吸引我所以平时也找些例子学习自己写几个小demo,但由于上家公司的项目中使用的是avalon2(后转vue)一直忙于项目的事半年没接触对所以对觉得react很陌生了。待业之际乘此机会重操(学)react。
props
react 组件化开发的思路(Component)一直被人称赞。其中父组件和子组件的通信就是通过props来传递的我看看props的几种用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app" ></div>
<script src="./dist/js/bundle.js" ></script>
</body>
</html>js文件
import React,{Component} from 'react';
import {render} from 'react-dom';
class MyComponent extends Component{
render(){
return(
<div>
<h1>{ this.props.name }</h1>
</div>
)
}
}
render(<MyComponent name="json" />,
document.querySelector("#app")
); //可以这样传递普通的传递方式解构传递
import React,{Component} from 'react';
import {render} from 'react-dom';
const props = { //定义一个对象
name:'cqs',
age:'25'
}
class MyComponent extends Component{
render(){
return(
<div>
<h1>{ this.props.name }</h1>
<h1>{ this.props.age }</h1>
</div>
)
}
}
render(<MyComponent {...props} />, //对象解构传递
document.querySelector("#app")
);//还可以解构传递props 不止可以传递对象还是传递方法
import React,{Component} from 'react';
import {render} from 'react-dom';
class SupComponent extends Component{
constructor(){
super();
this.state = {
number:0
}
}
handleAdd(){
this.setState({ number:++this.state.number}); //把方法放在父组件(控制器Controller)通过props传递给子组件,子组件触发调用父组件的state发生改变UI(View视图跟着变)
}
render(){
return(
<div>
<SubComponent handleAdd={ this.handleAdd.bind(this) } />
<p> { this.state.number } </p>
</div>
)
}
}
class SubComponent extends Component{
render(){
return(
<div>
<button onClick={ this.props.handleAdd } >普通按钮</button>
</div>
)
}
}
render( <SupComponent/>,document.querySelector("#app") );