React入门0x005: React Component和props

genefy 发布于2019-08-23 11:28 / 670人阅读

摘要：概述这一章讲组件，组件才是的核心，也是构建的项目中最小的单元。莫买沃洲山，时人已知处。是使用类的语法来写，所以很多的思想可以套用到，但是一定要记得，这是，而不是资源源码

0x000 概述

这一章讲组件，组件才是React的核心，也是React构建的项目中最小的单元。

0x001 组件

上面的章节有一个类似下面的栗子：

const App = () => {
    return hello
}
ReactDom.render(
    App(),
    document.getElementById("app")
)

查看浏览器

我们可以给他参数

const App = (name) => {
    return hello {name}
}
ReactDom.render(
    App("world"),
    document.getElementById("app")
)

查看浏览器

由此，我们可以自定义一些特别的组件了，比如：

const Article = (title, content) => {
    return 
        {title}
        {content}
    
}
ReactDom.render(
    Article("送方外上人","孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。"),
    document.getElementById("app")
)

查看浏览器

0x002 组件的函数写法和参数传递

组件也可以使用jsx 来写

const App = () => {
    return hello
}
ReactDom.render(
    ,
    document.getElementById("app")
)

用babel转码试试：babel --plugins transform-react-jsx index.js:

var App = function App() {
    return _react2.default.createElement(
        "p",
        null,
        "hello"
    );
};
_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById("app"));

可以看到依旧被转成了createElement函数，由React.createElement的文档说明可知，该函数的第一个参数可以是类似div、p之类的html元素，也可以是React Component，而React Component可以是一个类或者一个函数。该栗子中就是函数

那如果我们要实现传参呢，我们可以想想html如何传参，比如img：

那么写法和html及其类似的 jsx 呢？可想而知：

ReactDom.render(
    ,
    document.getElementById("app")
)

我们使用babel转码看看：babel --plugins transform-react-jsx index.js:

_reactDom2.default.render(_react2.default.createElement(App, { name: "world" }), document.getElementById("app"));

可以看到，被转化成了键值对作为React.createElement的第二个参数，那我们应该如何访问这个参数呢？

const App = (props) => {
    console.log(props)
    return hello {props.name}
}
ReactDom.render(
    ,
    document.getElementById("app")
)

查看浏览器：

0x003 组件的类写法和传参

在之前的文章，也已经写过这么一个类似的栗子：

class App extends React.Component{
    render(){
        return hello
    }
}
ReactDom.render(
    ,
    document.getElementById("app")
)

查看浏览器：

那如何传参呢？

class App extends React.Component {
    render() {
        console.log(this)
        return hello
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

查看浏览器：

我们可以看到，参数被放在了props中，所以，我们可以像这样访问：

class App extends React.Component {
    render() {
        console.log(this)
        return hello {this.props.name}
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

查看浏览器

0x004 jsx也是js

因为jsx也是js，所以，上面的栗子我们也可以如此改造

class App extends React.Component {
    render() {
        console.log(this)
        return hello {this.props.name}
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

使用babel转码看看：babel --plugins transform-react-jsx index.js:

_reactDom2.default.render(_react2.default.createElement(App, { name: Date() }), document.getElementById("app"));

查看浏览器：

0x005 总结

在项目中，我们一般使用类的形式组织整个项目，但是在某些情况下，使用函数也是一种不错的选择。

jsx是使用类html的语法来写js，所以很多html的思想可以套用到jsx，但是一定要记得，这是js，而不是html

0x006 资源

react

transform-react-jsx

源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97006.html

Router入门0x204: react-route简单栗子

摘要：概述这一章仔细讲一讲的使用栗子简单使用源码简单使用首页文章我的首页文章我的效果带导航激活效果源码带导航效果首页文章我的首页文章我的效果说明增强版，如果当前路由命中，将会启用或者。 0x000 概述这一章仔细讲一讲 react-route 的使用栗子 0x001 简单使用源码 import React from react import ReactDom from react-d...

番茄西红柿 2019-08-23 12:16 评论0 收藏0
Router入门0x205: react-route + redux + react 集成

摘要：概述这一章终于大集成了集成源码效果说明集成主要是用到库集成源码效果说明主要用到库，是针对库在环境下的封装组件，注入等属性接管跟组件指定路由和组件的对应关系集成源码引入相关的包和链接组件效果说明主要用到库都是用的接 0x000 概述这一章终于大集成了 0x001 集成react 源码 import React from react import ReactDom from rea...

yiliang 2019-08-23 12:16 评论0 收藏0
React入门0x007: 生命周期概念

摘要：概述上一章只是稍微了解了一下和相关的简单用法，这一章需要讲一下组件的生命周期。生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。 0x000 概述上一章只是稍微了解了一下state和setState相关的简单用法，这一章需要讲一下组件的生命周期。 0x001 生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。大凡事物从...

Blackjun 2019-08-23 11:30 评论0 收藏0
React入门0x008: 生命周期

0x000 概述上一章说明了生命周期的概念，本质上就是框架在操作组件的过程中暴露出来的一系列钩子，我们可以选择我们需要的钩子，完成我们自己的业务，以下讲的是react v16.3以下的生命周期，v16.3以及以上的版本有所不同 0x001 组件挂载以下是组件挂载的过程中触发的声明周期： class App extends React.Component { constructor(pr...

loonggg 2019-08-23 11:31 评论0 收藏0
React入门0x009: 事件处理

摘要：概述上一章讲咯生命周期，这一章就是事件处理咯事件绑定绑定一个外部函数按钮绑定一个内部函数按钮解决函数绑定的问题上面的栗子有个问题在内无法访问内的资源，比如按钮可以这么解决这个问题按钮或者按钮或者按钮第三中方式需要支持 0x000 概述上一章讲咯生命周期，这一章就是事件处理咯 0x001 事件绑定 // 绑定一个外部函数 function handleClick(event) { ...

objc94 2019-08-23 11:34 评论0 收藏0