React入门0x005: React Component和props

0x000 概述

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

0x001 组件

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

const App = () => {
    return <p>hello</p>
}
ReactDom.render(
    App(),
    document.getElementById('app')
)

查看浏览器

我们可以给他参数

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

查看浏览器

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

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

查看浏览器

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

组件也可以使用jsx 来写

const App = () => {
    return <p>hello</p>
}
ReactDom.render(
    <App></App>,
    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：

<img src="XXX.png">

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

ReactDom.render(
    <App name="world"></App>,
    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 <p>hello {props.name}</p>
}
ReactDom.render(
    <App name="world"></App>,
    document.getElementById('app')
)

查看浏览器：

0x003 组件的类写法和传参

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

class App extends React.Component{
    render(){
        return <p>hello</p>
    }
}
ReactDom.render(
    <App></App>,
    document.getElementById('app')
)

查看浏览器：

那如何传参呢？

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

ReactDom.render(
    <App name="world"></App>,
    document.getElementById('app')
)

查看浏览器：

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

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

ReactDom.render(
    <App name="world"></App>,
    document.getElementById('app')
)

查看浏览器

0x004 jsx也是js

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

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

ReactDom.render(
    <App name={Date()}></App>,
    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
• 源码