React组件

 

一个组件是一个函数,包括状态逻辑反馈逻辑副作用模版样式状态逻辑包含propsstate不可变量不可变量可以控制模版样式反馈逻辑说明点击等操作的反馈。

// Component.js
export default (props) => {
	不可变量 = 状态逻辑(props, state)
	反馈逻辑
	副作用
	return (
		模版样式(不可变量, 反馈逻辑)
	)
}

使用组件时可以通过props控制组件

// OtherComponent.js
<Component prop=value/>

引入Redux-React,把各个组件的state抽取到storestore是全局唯一的。如下声明不可变量

// Component.js
export default (props) => {
	
	{ 不可变量 } = useMappedState(useCallback(
    	store => {
    		由store、props计算出不可变量
      		return 不可变量
    	}, [props]))
	
	反馈逻辑 = some function...
	
	副作用
	
	return (
		模版样式(不可变量, 反馈逻辑)
	)
}

反馈逻辑要改变state时,无论是本组件的还是其它组件的,都要通过dispatch发送action,然后在reducer中更改state

// Component.js
export default (props) => {
	
	dispatch = useDispatch()
	
	{ 不可变量 } = useMappedState(useCallback(
    	store => {
    		由store、props计算出不可变量
      		return 不可变量
    	}, [props]))
	
	handleClick = (event) => {
		由event计算出args
		dispatch(action(args))
	}
	
	副作用
	
	return (
		模版样式(不可变量, handleClick)
	)
}

// Action.js
export const action = (args) => ({
    type: actionType,
    key: 由args计算出value
    ......
})

// Reducer.js
const defaultState = {
    key: value
    ......
}

export default (state = defaultState, action) => {
    switch (action.type) {
        case actionType: {
            return {
            		...
                 key: action.value
            }
        }
        default: {
            return state
        }
    }
}

各个组件的reducer要集合在一起,用于创建store

// RootReducer.js
const rootReducer = combineReducers({
	reducer1,
	reducer2,
	......
})
export default rootReducer

// Store.js
const store = createStore(rootReducer)
export default store

为了使Redux-React正常运行,要在项目的出口文件index.js添加一些代码。底层逻辑是它使用了useStateuseContext。其中<App />是最顶层的组件。

// index.js
ReactDOM.render(
	<StoreContext.Provider value={store}>
		<App />
	</StoreContext.Provider>,
	document.getElementById('container')
)

组件通过useEffect执行副作用。常见的副作用包括网络请求、订阅数据、操作DOM等。useEffect的第一个参数是副作用的函数fun,当useEffect没有第二个参数,那么fun在组件建立、组件更新时执行;当第二个参数为[]时,那么fun只在组件建立时执行;当第二个参数为[value]时,那么fun只在组件建立、组件更新且value出现变化时执行。当fun返回一个函数fun2时,fun2会在组件销毁时执行。

// Component.js
export default (props) => {
	
	dispatch = useDispatch()
	
	{ 不可变量 } = useMappedState(useCallback(
    	store => {
    		由store、props计算出不可变量
      		return 不可变量
    	}, [props]))
	
	handleClick = (event) => {
		由event计算出args
		dispatch(action(args))
	}
	
	// eg: 网络请求
	useEffect(() => {
		data = 网络请求数据
		dispatch(action(data))
	}, [])
	
	// eg: 操作DOM
	useEffect(() => {
		document.title = `You clicked ${count} times`;
	})
	
	return (
		模版样式(不可变量, handleClick)
	)
}

想要根据条件决定显示什么组件,可以这样做:

// Component.js
export default (props) => {
	
	......
	
	let com;
	if (condition) {
		com = 组件1
	} else {
		com = 组件2
	}
	
	return (
		{ com }
	)
}

想要根据条件决定显示还是隐藏组件,可以这样做:

// Component.js
export default (props) => {
	
	......
	
	return (
		{ condition && 组件 }
	)
}

想要获取DOM节点/组件的引用,可以这样做:

// Component.js
export default (props) => {
	
	......
	
	const ref = useRef()
	
	return (
		<div ref={ref}></div>
	)
}

其中的useRef还可以用于在函数间传递值。useRef的参数是这些值的初始值。

// Component.js
export default (props) => {
	
	......
	
	const ref = useRef({initialValue})
	
	function fun1() {
		// 读值
		ref.current = value
	}
	
	function fun2() {
		// 写值
		value = ref.current
	}
	
	return (
		......
	)
}