rif-loader

react jsx attribute similar Vue/v-if attribute
帮助实现React框架中，类似Vue的v-if属性

base effect： 原理/作用

// your code, before transform
// 原代码
const ELEMENT = ({ visible }) => (
  <div>
    <div r-if={visible}>VISIBLE</div>
  </div>
)

// result code
// 转换后代码
const ELEMENT = ({ visible }) => (
  <div>
    {
      visible ? <div>VISIBLE</div> : null
    }
  </div>
)

作者

白切 wechat: feng-baiqie

初始化：

npm install --save-dev rif-loader

use with webpack/loader：

做为独立的loader来使用

// webpack.config.js
module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        },
        'rif-loader'
      ]
    },
  ]
}

use with babel-loader/plugins：

做为babel-loader中的一个plugin来使用

// webpack.config.js
const { babelPlugin: rifPlugin } = require('rif-loader')

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
            plugins: [rifPlugin]
          }
        },
      ]
    },
  ]
}

use in react：

// 普通节点
import { useState } from 'raect'

const Element = () => {
  const [visible, setVisible] = useState(true)

  return (
    <div>
      <div r-if={visible}>ELEMENT</div>
      <button
        onClick={() => setVisible(!visible)}
      >
        visible/hidden
      </button>
    </div>
  )
}

// 组件
import { useState, useEffect } from 'raect'

const Component = () => {
  useEffect(() => {
    console.log('effect')
  }, [])

  return (<div>COMPNENT</div>)
}

const Element = () => {
  const [visible, setVisible] = useState(false)

  return (
    <div>
      <Component r-if={visible} />
      <button
        onClick={() => setVisible(!visible)}
      >
        visible/hidden
      </button>
    </div>
  )
}