阿里面试总结1

最新推荐文章于 2022-05-23 21:36:37 发布

VIP文章马优晨

最新推荐文章于 2022-05-23 21:36:37 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/qq_24147051/article/details/107636125

版权

(1) react组价设置

react纯静态的组件:

const Home = () => (
  <>
    <Head>
      <title>Home</title>
    </Head>
    <div><Button>我是按钮</Button></div>
 </>
)

react动态的组件

import React,{
   useState} from 'react'

const Home = () => {
   
const [ mylist , setMylist ] = useState(
    [
      {
   title:'50元加了。'},
      {
   title:'50元加了。'}
    ]
  )
 return (
 <>
    <Head>
      <title>Home</title>
    </Head>
    <div><Button>我是按钮</Button></div>
 </>
 ) 
}

(2) 实现一个bind

https://www.cnblogs.com/goloving/p/9380076.html

(3)实现一个Promise

Promise的原理
Promise其实内部也有一个defers队列存放事件，.then的事件就在里面,程序开始执行的时候，.then就已经放入下一个事件，然后后面当异步操作完成时，resolve触发事件队列中的事件，便完成了一个.then操作，其实到这里我们就可以很快地想出一种解决方案，每次异步操作完成通过resolve触发事件并将事件从事件队列中移除，通过事件队列中的事件的resolve使事件的触发持续下去。

基本用法

new Promise((resolve,reject) =>{
   
    if (condition){
   
        resolve();
    } else {
   
        reject();
    }
})

/*这是Promise的构造方法，参数是一个函数*/

function fn(num) {
   
    return new Promise((resolve, reject)=> {
   
         console.log("参入参数 num===",num);
         num === 1 ? resolve():reject();
    }).then(function() {
   
        console.log('参数是---1');
    }, function() {
   
        console.log('参数不是---1');
    })
}
fn(1);
console.log("主线加载完成");


// 参入参数 num=== 1
//主线加载完成
//参数是---1

通过log可以分析，Promise的构造函数是一个同步执行的，由于构造函数是同步的，
then方法是在js引擎加载的时候注册的，而执行的时候是在resolve之后

实现一个简单的Promise

1.promise的构造同步，参数是一个function, 接受2个参数resolve,reject,此时这2个参数也是一个function,支持一个参数

 function  Promise(fn) {
   

    function resolve(value) {
   

    }
    function reject(value) {
   

    }

    fn (resolve,reject);
}

//Promise的构造应该是如此，才能符合我们上面的预期

2.promise最重要的一个方法是then，我们需要实现then方法，then方法接受的也是2个function，一个是成功的回调，一个是失败的回调

function Promise(fn) {
   
    var value = null, succallbacks = [], failcallbacks = [];
    this.then = function (fulfilled, rejected) {
   
        succallbacks.push(fulfilled);
        failcallbacks.push(rejected);
    }

    function resolve(value) {
   
         succallbacks.forEach((callback) => {
   
             callback(value);
         })
    }

    function reject(value) {
   
        failcallbacks.forEach((callback) => {
   
            callback(value);
        })
    }

    fn(resolve, reject);
}

function fn(num) {
   
    return new Promise((resolve, reject) => {
   
        setTimeout(() => {
   
            resolve(num); //1   去掉time 则不会执行
        }, 1000)
    })
}

fn(1).then(data => {
   
        console.log(

最低0.47元/天解锁文章

马优晨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阿里面试总结1

(1) react组价设置react纯静态的组件:const Home = () => ( <> <Head> <title>Home</title> </Head> <div><Button>我是按钮</Button></div> </>)react动态的组件import React,{useState} from 'react
复制链接

扫一扫