function Counter() const = useState(0); return ( > div>Counter: valuediv> button onClick=() => setValue(value + 1)>Incrementbutton> button onClick=() => setValue(value - 1)>Decrementbutton> > )Run in REPL
Proudly sponsored by:

A different kind of library

Closer to lớn the DOM

Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM. It builds on stable platform features, registers real sự kiện handlers and plays nicely with other libraries.

Bạn đang xem: Componentdidmount là gì

Preact can be used directly in the browser without any transpilation steps.


Small Size

Most UI frameworks are large enough lớn be the majority of an app"s JavaScript kích cỡ. Preact is different: it"s small enough that your code is the largest part of your application.

That means less JavaScript to download, parse và execute - leaving more time for your code, so you can build an experience you define without fighting to keep a framework under control.


Big Performance

Preact is fast, & not just because of its form size. It"s one of the fastest Virtual DOM libraries out there, thanks to lớn a simple and predictable diff implementation.

Xem thêm: Ran Là Gì Trong Tiếng Anh? Ran Nghĩa Là Gì Trong Tiếng Anh

We automatically batch updates và tune Preact khổng lồ the extreme when it comes to performance. We work closely with browser engineers to lớn get the maximum performance possible out of Preact.


Portable và Embeddable

Preact"s tiny footprint means you can take the powerful Virtual DOM Component paradigm khổng lồ new places it couldn"t otherwise go.

Use Preact lớn build parts of an phầm mềm without complex integration. Embed Preact into a widget và apply the same tools và techniques that you would lớn build a full ứng dụng.


Instantly Productive

Lightweight is a lot more fun when you don"t have sầu to sacrifice productivity to lớn get there. Preact gets you productive right away. It even has a few bonus features:

props, state and context are passed to lớn render()Use standard HTML attributes lượt thích class và for

Ecosystem Compatible

Virtual DOM Components make it easy lớn cốt truyện reusable things - everything from buttons khổng lồ data providers. Preact"s thiết kế means you can seamlessly use thousands of Components available in the React ecosystem.

Xem thêm: Bị Hậu Sản Là Gì - 5 Vấn Đề Thường Gặp Ở Phụ Nữ Sau Sinh

Adding a simple preact/compat alias to lớn your bundler provides a compatibility layer that enables even the most complex React components to lớn be used in your application.

export mặc định class TodoList extends Component state = todos: <>, text: "" ; setText = e => this.setState( text: ); ; addTobởi = () => let todos, text = this.state; todos = todos.concat( text ); this.setState( todos, text: "" ); ; render( , todos, text ) return ( khung onSubmit=this.addTodo action="javascript:"> label> span>Add Todospan> input value=text onInput=this.setText /> label> button type="submit">Addbutton> ul> tovì => ( li>todo.textli> )) ul> form> ); Run in REPL

export mặc định class Stars extends Component async componentDidMount() let stars = await githubStars(this.props.repo); this.setState( stars ); render( repo , stars=0 ) let url = `$repo`; return ( a href=url class="stars"> ⭐️ stars Stars a> ); Run in REPL