How to use the two-way binding in Knout.js and ReactJS?

Jen-Hsuan Hsieh (Sean)
A Layman
Published in
5 min readMay 19, 2019

--

Copy right@A Layman

Components built by different frameworks must have the same action in one website. What we have to realize is how to use data binding in these frameworks.

A simple example is that users are allowed to modify the customer’s name from the component built by using Knout.js on a website. It will remind users their remain characters for users to enter the name.

Users are also allowed to modify products’ name the component built by using other frameworks.

In this article, we will discuss:

  • What’s the data binding?
  • How to implement the two-way binding in Knout.js and ReactJS?
  • What do React Hook improve in React 16.8?

What’s the data binding?

In this case, we have to decouple it to the view and the data model instead of manipulating DOM directly.

To make consistent values between several components in a single page, we have to maintain the single data source (the data model orthe view model in MVVM framework).

The data binding means the view and the data model were connected each other. If the one-way data binding works, you will make one of the following options:

  1. The view will update when…

--

--

Jen-Hsuan Hsieh (Sean)
A Layman

Frontend Developer🚀 Angular • React • Nest • Electron • Micro-frontend • Monorepo Architecture • https://daily-learning.herokuapp.com/