本文已参与[新人创作礼]活动，一起开启掘金创作之路

render描述：juejin.cn/post/699982…

jsx描述：juejin.cn/post/684668…

这里只是做简单应用

一.没有 jsx 的 render 函数

demo1

 创建函数式组件

<script>
import { createVNode } from 'vue'
export default {
  name: 'Hello',
  render () {
    // return createVNode(标签名, { 属性名: 属性值 }, 子节点)
    return createVNode('div', { id: 'box' }, 'hello')
  }
}
</script>

效果

控制台

demo2

    render () {
    // return createVNode(标签名, { 属性名: 属性值 }, 子节点)
    return createVNode('div', { id: 'box' }, [
      createVNode('p', {}, '我是一个段落1'),
      createVNode('p', {}, '我是一个段落2')
    ])
  }

效果

控制台

demo3

可使用数组的形式包裹子节点

      render () {
    // return createVNode(标签名, { 属性名: 属性值 }, 子节点)
    return createVNode('ul', {},[
      createVNode('li', {}, '111'),
      createVNode('li', {}, '222'),
      createVNode('li', {}, '333'),
      createVNode('li', {}, '444'),
    ])
  }

效果

控制台

二.有 jsx 的 render 函数

demo1

  render () {
    return <div>
      <p>我是一个段落1</p>
      <p>我是一个段落2</p>
    </div>
  }

效果

控制台

jsx中可以嵌套 js 的语法，但是需要用 {} 标记出来

demo2

注意函数的使用，及遍历数组使用map

   render() {
     var obj = {
       id: 1,
       name: "objName",
     };
     var arr = [1, 2];
     var flag = true
     var arr2 = [<li>1</li>, <li>2</li>];
     const clickFn = function (n) {
       console.log("clickFn" + n);
     };
   
     <input
          type="button"
          value="按钮"
          onClick={() => {
            clickFn(1);
          }}
        />
    
   return (
     <div>
       <input type="button" value="按钮0" onClick={clickFn} />
       <input type="button" value="按钮1" onClick={clickFn(1)} />
       <input type="button" value="按钮2" onClick={()=>{clickFn(2)}} />
       <h1>
         我是h1===={obj.name}==={arr}=={flag}
       </h1>
       <ul>
         {arr2}====
         {arr.map((item) => {
           return <li>{item}</li>; // [<li>1</li>,<li>2</li>,<li>3</li>]
         })}
       </ul>
     </div>
   );
 },

效果

按钮0点击生效，但是函数需要传参但是传不了

按钮1渲染立即生效，点击无效

按钮2点击生效