React 父子組件之間如何通信。
參考答案
父組件要傳數據給子組件很簡單，直接放在 props 里即可
子組件要傳遞數據給父組件就復雜點：
父組件將一個函數 fn 作為子組件的 props 傳給子組件
子組件在恰當的時候調用這個 fn，并且把數據放在 fn 的參數里
React 任意組件之間如何通信。
參考答案
- 使用 eventHub/eventBus 來通信
一個組件監(jiān)聽某個事件，另一個組件觸發(fā)相同的事件并傳參，即可實現(xiàn)兩個組件的通信
缺點是事件容易越來越多，不好控制代碼的復雜度 - 使用 Redux
每次操作觸發(fā)一個 action
action 會觸發(fā)對應的 reducer
reducer 會用舊的 state 和 action 造出一個新的 state
使用 store.subscribe 監(jiān)聽 state 的變化，一旦 state 變化就重新 render（render 會做 DOM diff，確保只更新該更新的 DOM）
React 的創(chuàng)舉
虛擬DOM
- 標簽就是函數
- 函數就是對象
- 標簽的屬性就是函數的參數
什么時候用函數什么時候用class
- 組件非常的純凈 沒有內部狀態(tài)
- 如果組件需要記錄自己的內部狀態(tài)
子組件怎么通知外界 （父子通信）
你只能通過回調的形式 調用別人給你傳的參數
父元素傳一個函數給子元素
子元素在恰當的時候調用這個函數
調用的時候可以傳參數
useEffect怎么使用
useEffect(()=>{
依賴項發(fā)生變化執(zhí)行回調
},[依賴項,依賴項,依賴項]);
如果只想執(zhí)行一次 第二個參數 []
useState怎么使用
變量 使用 useState 定義 和 改變
const[x,setX] = useState(初始值)
通過第二個參數 setX 來 改變 x 的值
使用setX 來改變x值時, setX所在的 函數會重新執(zhí)行
useRef怎么使用
跨組件的狀態(tài)管理 使用 useRef
const xxx = useRef(初始值)
xxx.current = ...
Fragment
reutrn(
<Fragment>
<div><div>
</Fragment>
)
React.forwardRef
接受渲染函數作為參數。React 將使用 props 和 ref 作為參數來調用此函數。此函數應返回 React 節(jié)點
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
會創(chuàng)建一個React組件，這個組件能夠將其 參數ref 轉發(fā)到其組件樹下的另一個組件中
cloneElement()
React.cloneElement(
element,
[props],
[...children]
)
- 以 element 元素為樣板克隆并返回新的 React 元素。
- 返回元素的 props 是將新的 props 與原始元素的 props 淺層合并后的結果。
新的子元素將取代現(xiàn)有的子元素， - 而來自原始元素的 key 和 ref 將被保留。
