@1002522146 2018-08-13T12:57:51.000000Z 字数 3865 阅读 412

美家家居面试题

未分类

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})
}

美家家居面试题

内容目录