[关闭]
@1002522146 2018-08-13T12:57:51.000000Z 字数 3865 阅读 407

美家家居面试题

未分类


1.列举react生命周期方法? 用图例表示其逻辑顺序?

属性props改变状态state改变卸载truefalsestartgetDefaultPropsgetDeInitialStatecompontentWillMountrendercompontentDidMount运行中componentWillReceivePropsshouldComponentUpdatecomponentWillUnmountendcomponentWillUpdaterendercomponentDidUpdate

2.组件间通信方式有哪些?

1.父组件向子组件通信 父组件通过props向子组件传递需要的信息
2.子组件向父组件通信 利用回调函数,父组件将一个函数作为 props传递给子组件,子组件调用该回调函数,便可以向父组件通信。
3.兄弟组件、层层嵌套 可以使用context对象,官方推荐复杂组件通信使用redux

3.用代码实现一个功能与原生select组件类似的组件, 必备功能:
a 可以进行单选操作;

b 能设置初始值;

  1. <html>
  2. <head>
  3. <meta charset="UTF-8"/>
  4. <title>React</title>
  5. <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  6. <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  7. <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="example"></div>
  11. <script type="text/babel">
  12. class Select extends React.Component {
  13. constructor(props) {
  14. super(props);
  15. this.state = {
  16. btns: [
  17. {
  18. btnName: "北京",
  19. skip: "1"
  20. },
  21. {
  22. btnName: "天津",
  23. skip: "2"
  24. },
  25. {
  26. btnName: "上海",
  27. skip: "3"
  28. },
  29. ]
  30. };
  31. }
  32. tabChoiced = (skip, btmName) => {
  33. this.setState({
  34. skip: skip,
  35. selsctBtn: btmName
  36. });
  37. console.log(this.state.selsctBtn)
  38. }
  39. render() {
  40. var _this = this;
  41. var btnList = this.state.btns.map(function (res, index) {
  42. var disabled = res.skip == this.state.skip ? "disabled" : '';
  43. return <button key={index} onClick={this.tabChoiced.bind(_this, res.skip, res.btnName)}
  44. disabled={disabled}>
  45. {res.btnName}
  46. </button>
  47. }.bind(_this));
  48. return (
  49. <div className="navbar">
  50. {btnList}
  51. <div> 选中了</div>
  52. {this.state.selsctBtn}
  53. </div>
  54. );
  55. }
  56. }
  57. ReactDOM.render(
  58. <Select/>,
  59. document.getElementById('example')
  60. );
  61. </script>
  62. </body>
  63. </html>

4.console.log下列表达式的返回结果是?

4.1 Function instanceof Object

  1. true

4.2 Object instanceof Function

  1. true

4.3 Date.proto === Function.prototype

  1. false

4.4 Function.proto === Function.prototype

  1. false

5.用代码实现:
5.1 一个宽400px, 高600px的表单, 且在浏览器中垂直和水平绝对居中. (可使用多种布局方法实现)

  1. <style>
  2. .box{
  3. width:400px;
  4. height:600px;
  5. position:absolute;
  6. top:50%;
  7. left:50%;
  8. margin-top:-300px;
  9. margin-left:-200px;
  10. background-color: red
  11. }
  12. </style>
  13. <div class="box"></div>
  1. <style>
  2. html, body{
  3. display: flex;
  4. align-items: center;
  5. justify-content: center;
  6. height: 100%;
  7. width: 100%;
  8. }
  9. .box{
  10. width:400px;
  11. height:600px;
  12. background: red;
  13. display: flex;
  14. align-items: center;
  15. justify-content: center;
  16. }
  17. </style>
  18. <div class="box"></div>

5.2 上述表单的默认背景颜色为白色, 当鼠标

移入表单区域时, 背景颜色在零点八秒内线性渐变为黑色.

  1. <style>
  2. html, body{
  3. display: flex;
  4. align-items: center;
  5. justify-content: center;
  6. height: 100%;
  7. width: 100%;
  8. }
  9. .box{
  10. width:400px;
  11. height:600px;
  12. background: white;
  13. display: flex;
  14. align-items: center;
  15. justify-content: center;
  16. }
  17. .box:hover{
  18. width:400px;
  19. height:600px;
  20. animation:colorChange 0.8s linear;
  21. animation-fill-mode: forwards;
  22. }
  23. </style>
  24. <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}
*/

  1. var mergeTwoLists = function(l1, l2) {
  2. return (l1.concat(l2)).sort(function(a,b){return a-b})
  3. }
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注