一、React元素
元素是构成 React 应用的最小单位,描述了你在屏幕上想看到的内容
const element =
Hello, world!
;二、元素渲染到 DOM 中
首先我们在一个 HTML 页面中添加一个 id=‘root’ 的
在此
要将React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上:
const element =
Hello, world!
;ReactDOM.render(
element,
document.getElementById('root')
);
三、更新元素渲染
React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法,如下计时器例子:
function tick() {
const element = (
Hello, world!
It is {new Date().toLocaleTimeString()}.
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
每一秒我们都会新建一个描述整个 UI 树的元素,React DOM 只会更新实际改变了的内容
四、 React组件
组件是React的核心,组件分为函数组件与 class 组件
1、函数组件
写类似JavaScript 函数,它接受任意的入参(即 “props”),并返回 React 元素。
function Welcome(props) {
return
Hello, {props.name}
;}
2、class 组件
也可以使用 ES6 class 来定义一个组件:
class Welcome extends React.Component {
render() {
return
Hello, {this.props.name}
;}
}
五、 组件详解
1、自定义组件
之前遇到的React 元素都只是使用DOM 标签:
const element =
Hello, world!
;现在React 元素也可以是用户自定义的组件:
const element = ;
2、实例
React自定义的组件:如果需要向组件传递参数,可以使用 this.props 对象,实例如下
function Welcome(props) {
return
Hello, {props.name}
;}
const element = ;
ReactDOM.render(
element,
document.getElementById('root')
);
3、回顾实例发生了什么?
我们调用 ReactDOM.render() 函数,并传入 作为参数。
React 调用 Welcome 组件,并将 {name: ‘world!’} 作为 props 传入。
Welcome 组件将
Hello, world!
元素作为返回值。React DOM 将 DOM 高效地更新为
Hello, world!
。4、组件名称必须以大写字母开头
HTML 元素名以小写字母开头(如
)六、 复合组件
我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。
function UserName(props) {
return
你的名称:{props.name}
;}
function UserAge(props) {
return
你的年龄:{props.age}
;}
function UserMessage() {
return (
);
}
ReactDOM.render(
,
document.getElementById('root')
);
·········································································································································
本文介绍React元素渲染和组件~~请大家多多指教,能get到知识点不要忘了关注点个赞~。
本文地址:https://blog.csdn.net/Allen_6/article/details/108966172
希望与广大网友互动??
点此进行留言吧!