我們或許不需要 React 的 Form 元件

單向資料流, 狀態管理至頂而下; 這樣可以確保整個架構資料的同步, 加強專案的穩定性; 它滿足以下 4 個特點:

1. 不阻斷資料流
2. 時刻準備渲染
3. 沒有單例元件
4. 隔離本地狀態

標籤原本就可以獲取其內部的所有表單內容

// 子元件, form標籤一樣可以獲取相應的輸入
function PasswordInput(){
return <div>
<p>密碼:</p>
<input name="password" />
</div>
}

function App() {
const { current: formDatas } = React.useRef({});

const handleOnChange = React.useCallback(event => {
formDatas[event.target.name] = event.target.value;
}, []);

const handleOnSubmit = React.useCallback(event => {
console.log('formDatas: ', formDatas);
event.preventDefault();
}, []);

return (
<form onChange={handleOnChange} onSubmit={handleOnSubmit}>
<input name="username" />
<PasswordInput />
<button type="submit" />
</form>
);
}
複製程式碼

表單聯動 \ 校驗

現在我們在之前的基礎上實現一個需求:

如果密碼長度大於8, 將使用者名稱和密碼重置為預設值

我們通過 form, 將input的dom元素儲存起來, 再在一些情況進行dom操作, 直接更新, 程式碼如下:

function App() {
const { current: formDatas } = React.useRef({});
const { current: formTargets } = React.useRef({});

const handleOnChange = React.useCallback(event => {
// 在input事件中, 我們將dom元素的值儲存起來, 用於表單提交
formDatas[event.target.name] = event.target.value;
// 在input事件中, 我們將dom元素儲存起來, 接下來根據條件修改value
formTargets[event.target.name] = event.target;

// 如果密碼長度大於8, 將使用者名稱和密碼重置為預設值
if (formTargets.password && formDatas.password.length > 8) {
// 修改DOM元素的value, 更新檢視
formTargets.password.value = formTargets.password.defaultValue;
// 如果儲存過
if (formTargets.username) {
// 修改DOM元素的value, 更新檢視
formTargets.username.value = formTargets.username.defaultValue;
}
}
}, []);

const handleOnSubmit = React.useCallback(event => {
console.log('formDatas: ', formDatas);
event.preventDefault();
}, []);

return (
<form onChange={handleOnChange} onSubmit={handleOnSubmit}>
<input defaultValue="hello" name="username" />
<input defaultValue="" name="password" />
<button type="submit" />
</form>
);
}

ReactDOM.render(<App />, document.getElementById('root'));
複製程式碼

如上述程式碼, 我們很簡單的實現了表單的聯動, 因為直接操作 DOM, 所以整個元件並沒有重新執行 render, 這種更新方案的效能是極佳的(HTML的極限).

在寫 React 的時候我們都非常忌諱 直接操作DOM, 這是因為, 如果我們操作了 DOM, 但是通過React對Node的Diff之後, 又進行更新, 可能會覆蓋掉之前操作DOM的一些行為. 但是如果我們確保這些 DOM 並不是受控元件, 那麼就不會發生以上情況.

它會有什麼問題麼? 當其他行為觸發 React 重繪時, 這些標籤內的值會被清空嗎?

明顯是不會的, 只要React的元件沒有被銷燬, 即便重繪, React也只是獲取到 dom物件修改其屬性:

function App() {
const { current: formDatas } = React.useRef({});
const { current: formTargets } = React.useRef({});
const [value, setValue] = React.useState(10);

// 我們這裡每隔 500ms 自動更新, 並且重繪我們的輸入框的字號
React.useEffect(() => {
setInterval(() => {
setValue(v => v + 1);
}, 300);
}, []);

const handleOnChange = React.useCallback(event => {
formDatas[event.target.name] = event.target.value;
formTargets[event.target.name] = event.target;

if (formTargets.password && formDatas.password.length > 8) {
formTargets.password.value = formTargets.password.defaultValue;
if (formTargets.username) {
formTargets.username.value = formTargets.username.defaultValue;
}
}
}, []);

const handleOnSubmit = React.useCallback(event => {
console.log('formDatas: ', formDatas);
event.preventDefault();
}, []);

return (
<form onChange={handleOnChange} onSubmit={handleOnSubmit}>
<p>{value}</p>
<input defaultValue="hello" name="username" />
{/* p 標籤會一直被 setState 更新, 字號逐步增大, 我們輸入的值並沒有丟失 */}
<input defaultValue="" name="password" style={{ fontSize: value }} />
<button type="submit" />
</form>
);
}
複製程式碼

但是, 如果標籤被銷燬了, 非受控元件的值就不會被儲存

以下例子, input輸入了值之後, 被消耗再被重繪, 此時之前input的值已經丟失了

function App() {
const { current: formDatas } = React.useRef({});
const { current: formTargets } = React.useRef({});
const [value, setValue] = React.useState(0);

React.useEffect(() => {
setInterval(() => {
setValue(v => v + 1);
}, 500);
}, []);

const handleOnChange = React.useCallback(event => {
formDatas[event.target.name] = event.target.value;
formTargets[event.target.name] = event.target;
}, []);

const handleOnSubmit = React.useCallback(event => {
console.log('formDatas: ', formDatas);
event.preventDefault();
}, []);

return (
<form onChange={handleOnChange} onSubmit={handleOnSubmit}>
{/* 如果 value 是 5 的整數倍, input 會被銷燬, 已輸入的值會丟失 */}
{value % 5 !== 0 && <input name="username" />}
{/* 我們可以使用 defaultValue 去讀取歷史的值, 讓重繪時讀取之前輸入的值 */}
{value % 5 !== 0 && <input defaultValue={formDatas.password} name="password" />}
{/* 如果可能, 我們最好使用 display 代替條件渲染 */}
<input name="code" style={{ display: value % 5 !== 0 ? 'block' : 'none' }} />
<button type="submit" />
</form>
);
}
複製程式碼

如程式碼中的註釋所述:

1. 如果 input 被銷燬, 已輸入的值會丟失
2. 我們可以使用 defaultValue 去讀取歷史的值, 讓重繪時讀取之前輸入的
3. 如果可能, 我們最好使用 display 代替條件渲

好了, 我們在瞭解了直接操作DOM的優點和弊端之後, 我們繼續實現表單常見的其他行為.

跨層級元件通訊

根據條件執行某子元件的函式, 我們只需要獲取該元件的ref即可, 但是如果涉及到多層級的元件, 這就會很麻煩.

傳統 Form 元件會提供一個 FormItem, FormItem會獲取 context, 從而提供跨多級元件的通訊

而我們如何既然已經獲取到dom了, 我們只需要在dom上捆綁事件, 就可以無痛的做到跨層級的通訊. 這個行為完全違反我們平時編寫React的思路和常規操作, 但是通過之前我們對 "標籤銷燬" 的理解, 通常可以使它在可控的範圍內.

我們看看實現的程式碼案例:

// 此為子子元件
function SubInput() {
const ref = React.useRef();

React.useEffect(() => {
if (ref.current) {
// 在DOM元素上捆綁一個函式, 此函式可以執行此元件的上下文事件
ref.current.saved = name => {
console.log('do saved by: ', name);
};
}
}, [ref]);

return (
<div>
{/* 獲取表單的DOM元素 */}
<input ref={ref} name="sub-input" />
</div>
);
}

// 此為子元件, 僅引用了子子元件
function Input() {
return (
<div>
<SubInput />
</div>
);
}

function App() {
const { current: formDatas } = React.useRef({});
const { current: formTargets } = React.useRef({});

const handleOnChange = React.useCallback(event => {
formDatas[event.target.name] = event.target.value;
formTargets[event.target.name] = event.target;

// 直接通過dom元素上的屬性, 獲取子子元件的事件
event.target.saved && event.target.saved(event.target.name);
}, []);

const handleOnSubmit = React.useCallback(event => {
console.log('formDatas: ', formDatas);
event.preventDefault();
}, []);

return (
<form onChange={handleOnChange} onSubmit={handleOnSubmit}>
{/* 我們應用了某個子子元件, 並且沒用傳遞任何 props, 也沒有捆綁任何 context, 沒有獲取ref */}
<Input />
</form>
);
}
複製程式碼

根據此例子我們可以看到, 使用 html 的 form 標籤,就可以完成我們絕大部分的 Form 元件的場景, 而且開發效率和執行效率都更高.

爭議

通過操作DOM, 我們可以很天然解決一些 React 非常棘手才能解決的問題. 誠然這有點像在刀尖上跳舞, 但是此文中給出了一些會遇到的問題及解決方案.

我非常歡迎對此類問題的討論, 有哪些還會遇到的問題, 如果能清晰的將其原理及原因描述並回復到此文, 那是對所有閱讀者的幫助.

寫在最後

請不要被教條約束, 試試挑戰它.