JSX本质

Posted 2020-12-14 猪mother

1.JSX的使用

class JSXBaseDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: ‘xiaoming‘,
            imgUrl: ‘https://img1.mukewang.com/5a9fc8070001a82402060220-140-140.jpg‘,
            flag: true
        }
    }
    render() {
        // 获取变量 插值
        const pElem = <p>{this.state.name}</p>
        return pElem

        // 表达式
        const exprElem = <p>{this.state.flag ? ‘yes‘ : ‘no‘}</p>
        return exprElem

        // 子元素
        const imgElem = <div>
            <p>我的头像</p>
            <img src="xxxx.png"/>
            <img src={this.state.imgUrl}/>
        </div>
        return imgElem

        // class
        const classElem = <p className="title">设置 css class</p>
        return classElem

        // style
        const styleData = { fontSize: ‘30px‘,  color: ‘blue‘ }
        const styleElem = <p style={styleData}>设置 style</p>
        // 内联写法，注意 {{ 和 }}
        // const styleElem = <p style={{ fontSize: ‘30px‘,  color: ‘blue‘ }}>设置 style</p>
        return styleElem

        // 原生 html
        const rawHtml = ‘<span>富文本内容<i>斜体</i><b>加粗</b></span>‘
        const rawHtmlData = {
            __html: rawHtml // 注意，必须是这种格式
        }
        const rawHtmlElem = <div>
            <p dangerouslySetInnerHTML={rawHtmlData}></p>
            <p>{rawHtml}</p>
        </div>
        return rawHtmlElem

        // 加载组件
        const componentElem = <div>
            <p>JSX 中加载一个组件</p>
            <hr/>
            <List/>
        </div>
        return componentElem
    }
}

export default JSXBaseDemo

2. JSX最终出来的是什么，是通过React.createElement函数来实现的，它的参数是怎么样的，最终返回的结果是什么，最终通过patch来渲染

                通过React.createElement即h函数，返回vnode

                第一个参数可能是元素，也可能是组件，通过 组件的首字母一定是大写来区分（react规定）

                React.createElement(‘div‘,null,child1,child2,child3)

                React.createElement(‘div‘,null,[child1,child2,child3])

                React.createElement(‘List‘,null,child1,child2,"文本节点")