React常用方法

前言

学无止境，无止境学。坚持每天学点编程知识，坚持每天写点小文章，坚持每天进步一点点。大家好，我是张大鹏，喜欢学习和分享，希望能够通过此公众号，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

乾坤未定，你我皆是黑马。大鹏一日同风起，扶摇直上九万里。宝剑锋从磨砺出，梅花香自苦寒来。不积跬步，无以至千里，不积小流无以成江海。

如果有多余的时间，就坚持学习吧，小时候学习改变命运，长大了学习丰富内涵，老了学习带来宁静。活到老，学到老，我能行！

创建元素时指定元素数据

React.createElement的第二个参数接收一个对象，该对象声明要创建的Dom元素应该具备哪些属性。比如我们创建一个h1标签，并给这个标题添加一个ID为title的属性，写法如下：

// 使用react创建一个h1标签

h1Props={

"id": "title"

}

const dish = React.createElement("h1", h1Props, "一级标题")

// 渲染React元素

ReactDOM.render(

dish, // 元素

document.getElementById('app'), // 渲染位置

)

渲染多个元素

ReactDOM.render支持传入一个dom数组，以渲染多个元素。用法如下：

// 使用react创建一个h1标签

h1Props = {

"id": "title"

}

const h1 = React.createElement("h1", h1Props, "一级标题")

const h2 = React.createElement("h2", h1Props, "二级标题")

// 渲染React元素

ReactDOM.render(

[h1, h2], // 元素

document.getElementById('app'), // 渲染位置

)

渲染子元素

React.createElement支持以嵌套的方式来创建子元素。用法如下：

// 使用react创建一个h1标签

h1Props = {

"id": "title"

}

const h1 = React.createElement("h1", h1Props, "渲染子元素")

// 创建子元素

const ul = React.createElement("ul", null,

React.createElement("li", null, "姓名"),

React.createElement("li", null, "年龄"),

React.createElement("li", null, "性别"),

)

// 渲染React元素

ReactDOM.render(

[h1, ul], // 元素

document.getElementById('app'), // 渲染位置

)

通过循环创建列表

React本身是JavaScript，所以可以很方便的实现数据和UI的解耦，这正是React最强大的地方。需要注意的是，每个子元素都应该有一个唯一的key，需要显示的配置。用法如下：

const items = [

"姓名",

"年龄",

"性别",

]

const ul = React.createElement(

"ul", {

className: "items"

},

items.map((item, i) =>

React.createElement("li", {

key: i

}, item)

)

)

ReactDOM.render(

ul,

document.getElementById('app')

)

封装组件

React有另一个非常强大的地方，那就是一个函数就是一个组件。这是JSX的胜利，真的非常的好用。用法如下：

// 声明组件

function ul() {

return React.createElement(

"ul",

null,

React.createElement("li", null, "姓名"),

React.createElement("li", null, "年龄"),

React.createElement("li", null, "性别"),

)

}

// 使用组件

ReactDOM.render(

React.createElement(ul, null, null),

document.getElementById('app')

)

传递组件数据

React的组件也支持接收数据然后动态渲染数据。用法如下：

// 准备数据

const itemsxxx = [

"姓名",

"年龄",

"性别",

]

// 声明组件

function Person({

items

}) {

return React.createElement(

"ul",

null,

items.map((item, index) => React.createElement("li", {

key: index

}, item))

)

}

// 使用组件

ReactDOM.render(

React.createElement(Person, {

items: itemsxxx

}, null),

document.getElementById('app')

)

总结