React Render简介
下面的文章提供了React Render的大纲。在React中，Rendering是用于使浏览器理解所使用的组件的最重要过程之一。它用于转换文档对象模型（DOM）节点中的反应组件，帮助浏览器理解并在屏幕上显示这些组件。操作元素比操作DOM要快得多。React创建了一个虚拟DOM，看起来和DOM一样。现在，它允许我们在运行的应用程序中进行修改。React会将虚拟DOM中的所有变化进行分批处理，并将其与原始DOM进行比较，然后更新被改变的内容。
React Render的语法
为了将元素渲染成一个房间的DOM节点，我们必须传递两个组件
ReactDOM.render()
const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'));
React Render的工作原理
React元素通过ReactDOM.render被渲染成一个DOM节点。当我们第一次调用reactDOM.render(element, domnode)时。DOM节点的内容会被元素的内容所取代。现在，如果我们再次调用render语句，它会通过元素的新内容来更新DOM节点的内容。
React Render的例子
下面提到了不同的例子。
例子#1 - 计时器中的基本渲染
在下面的例子中，我们使用了ReactDOM.render这个简单的语句来进行Render。下面的例子主要是根据IST（印度标准时间）来显示时间。
index.js
import React from "react"; import ReactDOM from "react-dom"; function tick() { const element = ( <div> <h2>Current Time in IST is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render(element, document.getElementById("root")); } setInterval(tick, 1000);
输出。
例子 #2 - 列表渲染中使用的Render
在下面的例子中，我们在App.js文件中使用了render before return，从数据库链接中导入数据。而在index.js中，我们已经从react-dom中导入了render。
App.js
import React , { Component } from "react"; import axios from "axios"; export default class App extends Component { constructor() { super(); console.log("Constructor"); this.state = { title: "Heyoo! Welcome to Our Database", users: [] }; } callBeforeRender() { console.log( "Called after render :( "); } async loadData() { console.log("Load data"); let { data } = await axios.get( "https://jsonplaceholder.typicode.com/users" ); this.setState({ users: data }); this.callBeforeRender(); } componentDidMount() { console.log("Did mount"); setTimeout(() => { this.loadData(); }, 2000); } componentWillUpdate() { console.log("Will update"); setTimeout(() => { }); } render() { console.log("Render"); return ( <div> <h1> {this.state.title} </h1> {this.state.users.map(user => { return <li>{user.email}</li>; })} </div> ); } }
index.js
import React from "react"; import { render } from "react-dom"; import Main from "./App"; const App = () => ( <div> <Main /> </div> ); render(<App />, document.getElementById("root"));
输出。
例子 #3 - 使用Render的计数器
在下面的例子中，我们实现了一个增量为1的简单计数器，在我们的index.js文件中，通过ReactDOM.render使用了render。
index.js
import React from "react"; import ReactDOM from "react-dom"; function Logger(props) { console.log(`${props.label} rendered`); return null; } function Counter(props) { const [count, setCount] = React.useState(0); const increment = () => setCount(c => c + 1); return ( <div> <button onClick={increment}>The Counter Value is {count}</button> {props.logger} </div> ); } ReactDOM.render( <Counter logger={<Logger label="counter" />} />, document.getElementById("root") );
输出。
例子 #4 - React中的自动渲染
在下面的例子中，render是通过'react-dom'导入的，用来返回数值。计时器自动增加并告诉你在页面上花费的时间。
index.js
import React , { Component } from 'react' import { render , createPortal } from 'react-dom' class Foo extends Component { componentDidMount () { this.props.shareState({ foo: 'You have spent time in seconds notified above' }) } render () { return ( <div style={{ border: `2.5px solid ${this.props.theme}` }}> Heyoo! {this.props.append} ({this.props.count}) <p>{this.props.sharedState.foo}</p> </div> ) } } const target = document.body.appendChild( document.createElement('div') ) const Components = props => Object.keys(props.components) .reduce((reduced, name) => { const Component = props.components[name] const className = `.js-component-${name}` const targets = document.querySelectorAll(className) return [ ...reduced, [...targets].map(target => createPortal( <Component {...props} {...target.dataset} />, target )) ] }, []) class App extends Component { constructor (props) { super(props) this.state = { theme: 'cyan', count: 0 } } componentDidMount () { setInterval(() => { this.setState(({ count }) => ({ count: count + 1 })) }, 1000) } render () { return ( <Components theme={this.state.theme} count={this.state.count} shareState={this.setState.bind(this)} sharedState={this.state} components={{ foo: Foo }} /> ) } } render(<App />, target)
输出。
例子 #5 - 在React中使用Render实现2种模式
在下面的例子中，我们有2个道具模式，即Counter和List，并通过index.js文件中的ReactDOM.render在应用程序中结合使用。
Counter.js和CounterWrapper.js是用来实现计数器的文件，而List.js和ListWrapper.js是用来实现列表的文件。最后，使用styles.css文件来处理风格问题。
Counter.js
import React from "react"; import CounterWrapper from "./CounterWrapper"; const Counter = () => { return ( <CounterWrapper> {({ increment , decrement , count }) => ( <div> <div> <h3>Counter</h3> </div> <div> <p>{count}</p> <button onClick={() => increment()}>Increasing Value</button> <button onClick={() => decrement()}>Decreasing Value</button> </div> </div> )} </CounterWrapper> ); }; export { Counter as default };
CounterWrapper.js
import React from "react"; class CounterWrapper extends React.Component { state = { count: 0 }; increment = () => { const { count } = this.state; return this.setState({ count: count + 1 }); }; decrement = () => { const { count } = this.state; return this.setState({ count: count - 1 }); }; render() { const { count } = this.state; return ( <div> {this.props.children({ increment: this.increment, decrement: this.decrement, count: count })} </div> ); } } export { CounterWrapper as default };
List.js
import React from "react"; import ListWrapper from "./ListWrapper"; const List = () => { return ( <ListWrapper link="https://jsonplaceholder.typicode.com/userss"> {({ list , isLoading , error }) => ( <div> <h2>Error</h2> {error ? <p>{error.message}</p> : null} {isLoading ? ( <h2>Updating Status...</h2> ) : ( <ul> {list.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> )} </div> )} </ListWrapper> ); }; export { List as default };
ListWrapper.js
import React from "react"; import axios from "axios"; class ListWrapper extends React.Component { state = { isLoading: true, error: null, list: [] }; fetchData() { axios .get(this.props.link) .then(response => { this.setState({ list: response.data, isLoading: false }); }) .catch( error => this.setState( { error , isLoading: false } ) ); } componentDidMount() { this.setState({ isLoading: true }, this.fetchData); } render() { const { children } = this.props; const ui = typeof children === "function" ? children(this.state) : children; return <>{ui}</>; } } export { ListWrapper as default };
index.js
import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; import Counter from "./Counter"; import List from "./List"; class App extends React.Component { render() { return ( <div> <Counter /> <List /> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, document.getElementById("root"));
styles.css
.App { font-family: 'Times New Roman' , Times , serif; text-align: center; }
输出。
结论
基于上面的文章，我们已经解释了React Render及其工作。我们已经演示了多个例子，以了解在不同的情况和应用程序的要求下，如何使用渲染来将组件转化为DOM节点。
推荐文章
这是一个关于React Render的指南。在这里，我们讨论了React Render的工作原理和例子，以及语句和输出。你也可以看看下面的文章，以了解更多 --
The postReact Renderappeared first onEDUCBA.
