tại sao phải nhập khẩu React

Question

tôi có mã mà chỉ hoạt động sau khi nhập Phản ứng nhưng tôi không sử dụng bất cứ nơi nào Phản ứng Tôi đang sử dụng reactDom thay

import ReactDOM from 'react-dom' 
import React, {Component} from 'react' 

class App extends Component { 
    render() { 
    return (
     <div>comp </div> 
    ) 
    } 
} 

//ReactDOM.render(<App/>, document.getElementById('root')) 
ReactDOM.render(<div>sv</div>, document.getElementById('root')) 

tại sao nó đòi hỏi phải nhập khẩu Phản ứng ??

Answer 1

Mặc dù bạn không sử dụng rõ ràng cá thể React bạn đã nhập, JSX được chuyển thành cuộc gọi React.createElement(), sử dụng nó.

Trong ví dụ của bạn, <div>comp </div> được Babel chuyển thành React.createElement('div', null, 'comp').

Answer 2

Tôi từng nghĩ rằng nếu ReactDOM sử dụng React thì nó sẽ đảm nhiệm việc nhập nó. Nhưng đó không phải là trường hợp. Sau khi JSX trong mã nguồn của bạn được chuyển đổi, rõ ràng là nó sử dụng gói React một cách rõ ràng. Và do đó nó là bắt buộc.

React.createElement('div', null, 'comp') 

Answer 3

Phản ứng nhập khẩu là cần thiết vì mã JSX sau: -

(
    <div>comp </div> 
) 

bị transpiled để

React.createElement(
    "div", 
    null, 
    "comp " 
); 

Đây là lý do bạn cần phải nhập khẩu Phản ứng; Tôi hy vọng sẽ trả lời câu hỏi của bạn.

Bạn luôn có thể tham khảo https://babeljs.io để hiểu điều gì sẽ được chuyển đổi thành nội dung.

Answer 4

Đây là một câu hỏi thực sự thú vị, vì bạn nói đúng rằng mã không trông giống như như nó đang sử dụng React, nhưng nó rất phức tạp.

Bất cứ lúc nào bạn sử dụng viết tắt <Component /> mã những gì thực sự xảy ra là JSX được transpiled bởi Babel thành một cái gì đó thường xuyên Javascript.

<Component/> 
// Is turned into 
React.createElement(...) 

Do đó mã không thực sự cần Phản ứng để được nhập khẩu, mặc dù nó không rõ ràng để người đọc