周报@2023-09-06

1function withLoading(Component) {
2  return function EnhancedComponent({ isLoading, ...props }) {
3    if (isLoading) {
4      return <div>Loading...</div>;
5    }
6    return <Component {...props} />;
7  };
8}

1const ListWithLoading = withLoading(List);
2<ListWithLoading isLoading={dataLoading} data={data} />

1class ErrorBoundary extends React.Component {
2  state = { hasError: false };
3
4  static getDerivedStateFromError(error) {
5    return { hasError: true };
6  }
7
8  componentDidCatch(error, info) {
9    logErrorToService(error, info);
10  }
11
12  render() {
13    if (this.state.hasError) {
14      return <div>Something went wrong!</div>;
15    }
16    return this.props.children;
17  }
18}
19
20function withErrorBoundary(Component) {
21  return props => (
22    <ErrorBoundary>
23      <Component {...props} />
24    </ErrorBoundary>
25  );
26}

1const SafeComponent = withErrorBoundary(MyComponent);

1function withUser(Component) {
2  return function EnhancedComponent(props) {
3    const user = getCurrentUser();
4    return <Component {...props} user={user} />;
5  };
6}

1const UserAwareComponent = withUser(SomeComponent);

1import { withRouter } from 'react-router-dom';
2
3function ComponentNeedingRouterProps({ history, location, match }) {
4  // 使用 history, location, match 作一些操作
5}
6
7export default withRouter(ComponentNeedingRouterProps);

1import { connect } from 'react-redux';
2
3function mapStateToProps(state) {
4  return {
5    items: state.items,
6  };
7}
8
9function MyComponent({ items }) {
10  // 使用来自 Redux store 的 items
11}
12
13export default connect(mapStateToProps)(MyComponent);

1import { useState, useEffect } from 'react';
2
3function useFetch(url) {
4  const [data, setData] = useState(null);
5  const [loading, setLoading] = useState(true);
6  const [error, setError] = useState(null);
7
8  useEffect(() => {
9    fetch(url)
10      .then(response => {
11        if (!response.ok) throw new Error("Network response was not ok");
12        return response.json();
13      })
14      .then(data => {
15        setData(data);
16        setLoading(false);
17      })
18      .catch(error => {
19        setError(error);
20        setLoading(false);
21      });
22  }, [url]);
23
24  return { data, loading, error };
25}

1function Component() {
2  const { data, loading, error } = useFetch('https://api.example.com/data');
3
4  if (loading) return <div>Loading...</div>;
5  if (error) return <div>Error: {error.message}</div>;
6
7  return <div>{data && data.map(item => <div key={item.id}>{item.name}</div>)}</div>;
8}

1import { useState, useEffect } from 'react';
2
3function useWindowSize() {
4  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
5
6  useEffect(() => {
7    const handleResize = () => {
8      setSize({
9        width: window.innerWidth,
10        height: window.innerHeight
11      });
12    };
13
14    window.addEventListener('resize', handleResize);
15    return () => {
16      window.removeEventListener('resize', handleResize);
17    };
18  }, []);
19
20  return size;
21}

1function Component() {
2  const { width, height } = useWindowSize();
3
4  return <div>Window size is {width}x{height}</div>;
5}

1<div class="flex-container">
2    <div class="flex-item">1</div>
3    <div class="flex-item">2</div>
4    <div class="flex-item">3</div>
5</div>

1.flex-container {
2    display: flex;
3}
4
5.flex-item:nth-child(1) {
6    order: 2;
7}
8
9.flex-item:nth-child(2) {
10    order: 1;
11}
12
13.flex-item:nth-child(3) {
14    order: 3;
15}

1class Schedule {
2  constructor(concurrency) {
3    this.concurrency = concurrency; // 最大并发数量
4    this.waiting = []; // 等待执行的任务队列
5    this.running = []; // 正在执行的任务队列
6  }
7
8  // 执行任务
9  execute() {
10    while (this.running.length < this.concurrency && this.waiting.length) {
11      const task = this.waiting.shift(); // 从等待队列中取出任务
12      this.running.push(task);
13
14      task()
15        .then(() => {
16          this._complete(task); // 成功完成后，将任务从正在执行队列中移除
17        })
18        .catch(() => {
19          this._complete(task); // 出错后，将任务从正在执行队列中移除
20        });
21    }
22  }
23
24  // 添加任务
25  add(task) {
26    this.waiting.push(task);
27    this.execute();
28  }
29
30  // 完成任务
31  _complete(task) {
32    const index = this.running.indexOf(task);
33    if (index > -1) {
34      this.running.splice(index, 1); // 从正在执行队列中移除已完成的任务
35    }
36    this.execute(); // 检查是否有新的任务可以开始执行
37  }
38}
39
40// 使用示例
41const scheduler = new Schedule(2); // 最大并发为2
42
43// 模拟异步任务
44function taskGenerator(name, delay) {
45  return () => {
46    console.log(`Task ${name} started`);
47    return new Promise((resolve) => {
48      setTimeout(() => {
49        console.log(`Task ${name} completed`);
50        resolve();
51      }, delay);
52    });
53  };
54}
55
56scheduler.add(taskGenerator('A', 1000));
57scheduler.add(taskGenerator('B', 500));
58scheduler.add(taskGenerator('C', 1200));
59scheduler.add(taskGenerator('D', 700));