sử dụng Quăn Niềng răng trong ES6 tuyên bố nhập khẩu

Question

là gì tôi có thể thấy có hai cách khác nhau để nhập

import React from 'react' 
import { render } from 'react-dom' 

thứ hai có dấu ngoặc đơn. Vậy đâu là sự khác biệt giữa cả hai? và khi nào tôi nên thêm dấu ngoặc vuông? cảm ơn

Answer 1

Vâng sự khác biệt giữa việc bạn nên nhập các thành phần của mình within brackets or without it nằm trong cách bạn export nó.

Có hai loại xuất khẩu

1. Mặc định Xuất
2. Names Xuất

Một thành phần có thể có one default export and zero or more named xuất khẩu

Nếu một thành phần là một xuất khẩu mặc định thì bạn cần phải nhập khẩu không có dấu ngoặc đơn Ví dụ

export default App; 

Việc nhập khẩu nó như

import App from './path/to/App'; 

Một xuất khẩu tên là có thể giống như

export const A = 25; 

hoặc

export {MyComponent}; 

Các bạn có thể nhập nó như

01.

import {A} from './path/to/A'; 

hoặc

import {A as SomeName} from './path/to/A'; 

Nếu thành phần của bạn có một xuất khẩu mặc định và vài tên xuất khẩu, thậm chí bạn có thể kết hợp chúng lại với nhau trong khi nhập khẩu

import App, {A as SomeName} from './path/to/file'; 

Tương tự như vậy trong trường hợp react và react-dom, React và ReactDOM tương ứng là default exports trong khi, ví dụ Component là named export trong react và render là một xuất khẩu được đặt tên theo số react-dom. Thats lý do bạn có thể làm

import ReactDOM from 'react-dom'; 

và sau đó sử dụng

ReactDOM.render() 

hoặc sử dụng nó như đã đề cập trong câu hỏi của bạn.

Answer 2

Không cần phải thêm khung nếu bạn xuất làm mặc định. bạn chỉ có thể mặc định trong mô-đun.

Trường hợp1:

chức năng mặc định xuất khẩu (num1, num2) { trở num1 + num2; }

Trường hợp2:

chức năng sum (num1, num2) { trở num1 + num2; }

xuất {tổng làm mặc định};

case3:

chức năng sum (num1, num2) { trở num1 + num2; }

tổng mặc định xuất;

bạn có thể nhập mặc định

nhập khẩu tổng hợp từ "./test.js";

console.log (tổng (1, 2));

Answer 3

Cân nhắc primitives.js,

export default (a, b) => a + b; 
export const sub = (a, b) => a - b; 
export const sqr = a => a**2; 

nó có thể được nhập khẩu như thế này,

import sum, { sub, sqr } from './primitives'; 

Trong trường hợp này, sum được gọi là "Default xuất khẩu" và một mô-đun có thể chứa một đĩa đơn " Mặc định chỉ xuất ".

sub và sqr được gọi là "Đặt tên đã xuất" và mô-đun có thể chứa nhiều lần xuất được đặt tên.