(╯‵□′)╯︵┻━┻ 令人厭惡的 React

最近因為工作的關係，所以維護一個修改一個 React 專案

這也是我第一次真正接觸 React 

以前我看 JSX 可以用以下方是處理 dom 感覺超酷超方便的

const foo = (
	<div>
		<h2>Hello World</h2>
		<p>Foo</p>
	</div>
)

但實際操作下來……不要瞎掰好嗎

先打個預防針，該專案使用的是 React v15.6.1，而現在的 React 已經是 v18.2.0 了，所以內容可能不適用於最新版本……

Element Attribute

Attribute 命名

首先最讓我詬病的就是 Element Attribute。

在 (X)HTML 中，attrubutes 都是以蛇形命名法（但不是用底線，而是減號-或是之間沒有分隔）來撰寫。例如：

<div>
	<span aria-hidden="true"></span> <!-- 以減號處理 -->
	<input autocomplete="off" />     <!-- 中間不分隔 -->
</div>

但 React 卻有各種可能

const foo = (
	<div>
		<span aria-hidden="true"></span>                          <!-- aria、data-* attribute 就是用減號處理 -->
		<input autoComplete="off" onClick = {function(e){}}/>     <!-- autoComplete、onclick ……等卻是用駝峰式 -->
	</div>
)

在沒有 IDE 輔助下，極其容易出錯。而且你沒辦法完全參照 HTML 的說明文件

Attribute 名不同於 HTML 的

最好的例子就是 label 的 for 了。

在 HTML 中， for 是這樣使用的：

<div>
	<label for="foo">Foo: </label>
	<input id="foo" />
</div>

然而，在 React 卻得這樣寫：

const foo = (
	<div>
		<label htmlFor="foo">Foo: </label>
		<input id="foo" />
	</div>
)

(╬▔皿▔)╯ 不查誰知道啦

Handle Component

Component 也是個處理起來很麻煩的東西。

本來我以為要建立一個 Component，用以下寫法就好了

import { Component } from 'react';
class Foo extends Component{
	render(){
		return (
			<div>Foo Bar</div>
		)
	}
}

export default Foo

但，實際上這樣寫會出錯。

要 import React 和 connect 才行

import React, { Component } from 'react';
import { connect } from "react-redux";
class Foo extends Component{
	render(){
		return (
			<div>Foo Bar</div>
		)
	}
}

Foo = connect(/* 中略 */)(Foo)
export default Foo

(╬▔皿▔)╯ Why!?

更別提 form 的處理了！

Form

表單的 submit 又是另一個極其不直覺的東西。

import React, { Component } from 'react';
import { connect } from "react-redux";
class Foo extends Component{
	onSubmit(){}


	render(){
		return (
			<div>
				<form onSubmit = {handleSubmit(this.onSubmit.bind(this))} >
					<input type="text" name="bar" />
					<button type="submit">送出</button>
				</form>
			</div>
		)
	}
}

Foo = reduxForm({ form: 'FooForm' })(Foo);
const selector = formValueSelector('FooForm');
function mapStateToProps(state) {
	return {
		bar: selector(state, 'bar')
	}
}
Foo = connect(mapStateToProps)(Foo);
export default Foo

貌似好像要這樣寫吧……

我知道 React 的設計是要你用 class Foo 裡面的 state / props 來處理表單參數

這種寫法也太複雜了

原生的 HTML / javascript 只要這樣即可：

<form id="f">
	<input type="text" name="bar" />
	<button type="submit">送出</button>
</form>

document.querySelector("#f").addEventListener("submit", function(e){
	// ...
})

要取得表單的各項參數還不如直接用 javascript 原生的 FormData 比較簡單也比較容易

甚至你可以用以下方式取得 bar 的值

let form = document.querySelector("#f")
console.log(form.bar.value)

Log

再來是 log，React 要是 Component 有錯，或是有哪個 Router 沒設定好，我實在是難以從瀏覽器或 console 上的 log 找到。

瀏覽器或許能幫我在 Component 那下中斷點，但是那也要程式有執行到該處啊。

若在生成 Component 就出錯，很難 debug

結語 

React 的坑我已經對其深惡痛絕！若不是因為工作需要，誰想碰這塊東西啊⁉

React 現在除了可以編譯多平台外，我實在想不到有啥會讓我去用的理由。

我還不如寫原生 HTML + javascript（例如 jQuery）還比較輕鬆也比較不容易有問題。