@1002522146
2018-08-13T12:57:51.000000Z
字数 3865
阅读 408
未分类
1.列举react生命周期方法? 用图例表示其逻辑顺序?
2.组件间通信方式有哪些?
1.父组件向子组件通信 父组件通过props向子组件传递需要的信息
2.子组件向父组件通信 利用回调函数,父组件将一个函数作为 props传递给子组件,子组件调用该回调函数,便可以向父组件通信。
3.兄弟组件、层层嵌套 可以使用context对象,官方推荐复杂组件通信使用redux
3.用代码实现一个功能与原生select组件类似的组件, 必备功能:
a 可以进行单选操作;
b 能设置初始值;
<html>
<head>
<meta charset="UTF-8"/>
<title>React</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Select extends React.Component {
constructor(props) {
super(props);
this.state = {
btns: [
{
btnName: "北京",
skip: "1"
},
{
btnName: "天津",
skip: "2"
},
{
btnName: "上海",
skip: "3"
},
]
};
}
tabChoiced = (skip, btmName) => {
this.setState({
skip: skip,
selsctBtn: btmName
});
console.log(this.state.selsctBtn)
}
render() {
var _this = this;
var btnList = this.state.btns.map(function (res, index) {
var disabled = res.skip == this.state.skip ? "disabled" : '';
return <button key={index} onClick={this.tabChoiced.bind(_this, res.skip, res.btnName)}
disabled={disabled}>
{res.btnName}
</button>
}.bind(_this));
return (
<div className="navbar">
{btnList}
<div> 选中了</div>
{this.state.selsctBtn}
</div>
);
}
}
ReactDOM.render(
<Select/>,
document.getElementById('example')
);
</script>
</body>
</html>
4.console.log下列表达式的返回结果是?
4.1 Function instanceof Object
true
4.2 Object instanceof Function
true
4.3 Date.proto === Function.prototype
false
4.4 Function.proto === Function.prototype
false
5.用代码实现:
5.1 一个宽400px, 高600px的表单, 且在浏览器中垂直和水平绝对居中. (可使用多种布局方法实现)
<style>
.box{
width:400px;
height:600px;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-200px;
background-color: red
}
</style>
<div class="box"></div>
<style>
html, body{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.box{
width:400px;
height:600px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="box"></div>
5.2 上述表单的默认背景颜色为白色, 当鼠标
移入表单区域时, 背景颜色在零点八秒内线性渐变为黑色.
<style>
html, body{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.box{
width:400px;
height:600px;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.box:hover{
width:400px;
height:600px;
animation:colorChange 0.8s linear;
animation-fill-mode: forwards;
}
</style>
<div class="box"></div>
6.【合并两个有序列表】
将两个有序链表合并为一个新的有序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。
示例:
输入:1->2->4, 1->3->4
输出:1->1->2->3->4->4
/**
* Definition for singly-linked list.
* function ListNode(val) {
* this.val = val;
* this.next = null;
* }
/
/*
* @param {ListNode} l1
* @param {ListNode} l2
* @return {ListNode}
*/
var mergeTwoLists = function(l1, l2) {
return (l1.concat(l2)).sort(function(a,b){return a-b})
}