How does React obtain data from the backend and render the data to the front end?

For beginners of react, please note: D we know that the traditional backend development is to embed data in the Page Structure and parse it on the server, for example: {code ...} once you access test. php, then the server-side PHP interpreter will put & amp; lt ;? Php? & Amp; gt; the Code in it is used to solve the problem... for beginners, refer to "D" for incorrect understanding.

We know that the traditional backend development is to embed data in the Page Structure and parse it in the server, for example:

//test.php    
  

Once you access test. php, the PHP interpreter on the server will The code in it is interpreted, converted to hello, and returned to the browser.

Now the problem arises. I have a react component, but I cannot directly embed php and other backend code in the react component (because the front-end completes parsing/rendering ), so how can we better embed backend data?

You can think of the following methods:

• Ajax asynchronous request, get results and insert?

• When the backend outputs data to a JSON file, it reads the JSON file at the front end and renders the page? (If the data changes, isn't it a headache to maintain this JSON file ?)

How can I solve this problem?

Reply content:

This is a beginner's react. If you do not understand it, please point out: D

We know that the traditional backend development is to embed data in the Page Structure and parse it in the server, for example:

//test.php    
  

Once you access test. php, the PHP interpreter on the server will The code in it is interpreted, converted to hello, and returned to the browser.

Now the problem arises. I have a react component, but I cannot directly embed php and other backend code in the react component (because the front-end completes parsing/rendering ), so how can we better embed backend data?

You can think of the following methods:

• Ajax asynchronous request, get results and insert?

• When the backend outputs data to a JSON file, it reads the JSON file at the front end and renders the page? (If the data changes, isn't it a headache to maintain this JSON file ?)

How can I solve this problem?

Ajax and json are different in the form of reactjs, but will eventually become JavaScript objects, depending on the specific situation.

For example, if we create a page to filter the services that a website provides, this page is roughly as follows:

Class ServiceList extends React. component {constructor (props) {super (props) this. state = {// we use the services in the state to save all the services. // The content is blank at the beginning. services: [], // The view here determines which service views we want to display: "type_a"} render () {// when the react library runs to the render method, the project let serviceShows = this. state. services. map (service, index) =>{// if the type of this service matches the current view, add it to the array of the content to be displayed to go to if (service. type = this. state. view) {return
{Service}
}) Return (
{// Here, we will display the content to be displayed} {serviceShows}
)} // We can see that services is an empty array in the built-in state when our class is constructed, we need to fill in the react document's "component lifecycle" page with content (this page is very important, be sure to understand under what circumstances each function will be triggered). We recommend that you use the componentDidMount function to obtain the required data after each component is displayed, then perform componentDidMount () {// The component is first rendered as a blank service, you can understand that we call this function after rendering the webpage framework // After rendering, we use ajax to retrieve data from the server. let xhr = new XMLHttpRequest () // the server is your favorite, you can use php or node. You only need to implement the standard GET method. // The post, put, delete, and other methods are the same. // obviously, if your data does not need to be extracted from the database, or remains unchanged for a long time, and you are not afraid of leaks // You can request a json file xhr here. open ("GET "," http://your.server.com/api/services ", True) // select whether to send the information for identity authentication along with the get request. withCredentials = true xhr. send () xhr. onreadystatechange = () => {if (xhr. readyState = XMLHttpRequest. DONE) {if (xhr. status = 200) {// Of course you can use other methods to encode your returned information. But what is more convenient for the Javascript world than json? Let gotServices = JSON. parse (xhr. responseText) // Well, we get the service list and use the setState method to overwrite the services data of the current element. this. setState ({services: gotServices})} else {alert ("ajax failed") }}// then we have rendered the page and obtained data from the server, we also put the data to the desired location. // What else should we do to display the new data in the element we write? // Don't worry. react controls all setState methods. // when it finds that you have set a new state for an element, he will tell the element to execute the render method again, // then you can check the render method again. state. when the content of services is different, different content will naturally be rendered. // how can we obviously feel the existence of the previous two or later pasters? // Set a latency of 5 seconds for the ajax request interface on your server. // you will see that the new content is refreshed when the returned result is obtained}

React. js is positioned as "A JavaScript Library for building user interface". Its documentation says many people use it as mvc v. Therefore, React. js does not care how you embed backend data. In other words, we can apply the same idea to the components created by React. js by using a standard HTML element to deal with the backend.

For exampleinput, You can:

To get the variable from PHP.$name.

A React. js component can also be like:

ReactDOM.render(React.createElement(HelloMessage, { name: "
  " }), mountNode);

With standard elements, you can use AJAX to get a value and perform operations (such as using jQuery:

$.ajax(...)  .done(function(data){    $('#name').val(data.name);  });

When using React. js, you can also use your own method to update components when AJAX returns.

How can we solve the trouble of maintaining JSON information? In PHPecho $var;Andecho json_encode($var);The trouble level is an order of magnitude.

The backend uses nodejs or php for restful api. The front-end react uses jquery ajax to obtain data and then adds the data to this. state, and then put this. the data of the state is displayed. The User Interaction module is used to obtain data from ajax and then update this. state and then react automatically updates the dom interface

This should be the case. I am also a cainiao @-@

Through ajax, the webpage template is loaded first, and then the data is loaded. However, the request will be sent several times.

Roughly output data directly to the scirpt tag on the backend as a global object and read data from anywhere

React. js combined with Fetch. js