the difference between react and jquery manipulating dom, and why jquery is not recommended in the react framework
the difference between react and jquery manipulating dom, and why jquery is not recommended in the react framework
the subject should be at the beginning of the introduction react, react to make it clear that do not manipulate dom, to change the operation data (status), to make it clear that react makes the page render by manipulating the data (status).
in the past, the most common way for us to use jquery to operate dom, is to insert data into dom to achieve the effect of local refresh, but operating dom is very performance-consuming.
those who have used react will basically not use jq.
before an interviewer asked, "do you use jq?"
me: I use react, instead of jq.
interviewer: how could anyone not use jq?
me: I use react, instead of jq.
interviewer: well, that's all for today. You can go now.
the cost of operating dom is too high , and the performance of is not good , so there is virtual dom of the mainstream framework. Instead of operating dom, it uses diff algorithm to create virtual dom, first, and then when data changes are detected, diff algorithm is executed to render dom at minimum cost.
if you want to know more, it is recommended to delve into the virtual dom and diff algorithms.
because react is a virtual dom, and jq is an operation dom
jQuery is based on Dom, React is data-driven: https://codeshelper.com/q/10.
two front-end frameworks were born in different ages. The core algorithm is also different. Jquery advocates frequent manipulation of dom. React . Frameworks such as vue use virtual dom. It is mainly driven by data.
Let me make two points.
first, thinks differently . React is data-driven, which means that data determines dom. So if you use the idea of jquery to manipulate DOM directly, it violates this idea.
second, the coexistence of the two may have unexpected problems . Suppose there is such a scenario:
A component of react,
function A(props) {
return <div><div id="jq">jquery</div>{props.count}</div>
} A component props is now {count: 1}, and then you use jq to modify the id to the element of jq.
then props changes to {count: 2}, react renders again, and you will find that the element whose id is jq has returned to its previous state.
solution: detach a jq component and use shouldComponentUpdate to return false, to turn the component into a component that will not be updated
therefore does not recommend to do dom operations in data-driven frameworks such as react.
the original jquery/ will do all the useless dom operations in the middle.
react/vue will first operate on vdom. These useless operations are all carried out in vdom, and js is more efficient than dom. Get the final modified vdom and then operate the actual dom
for example, 1: 1 = 1: 1-2: 2
jquery/ will do all the operations of 1: 1-2: 2, and 2
react/vue will write 1: 1-2: 2 on draft paper (vdom), and directly get 1: 1: 1: 2