React实践技巧

React实践技巧

第一天：

1.useReducer实践

export const GloabalContext = creatContext(initailState);

 GlobalProvider = ({children}) =>{
    const [state, dispatch] = useReducer(AppReducer,initialState);
     function deleteTransaction(){
    dispatch({
        type:'DELETE_TRANSACTION',
        payload:id
    })
}

function addTransaction(){
    dispatch({
        type:'ADD_TRANSACTION',
        payload:transcation
    })
}
    
return (<GlobalContext.Provider value={{
            tansactions: state.transactions，
            deleteTransaction,
            addTransaction
            }}>
        {children}
</GlobalContext.Provider>);
        )
}

使用：

//globalprovider wrap the son ,son can use gloabalcontext
<GlobalProvider><div classname:"son"></GlobalProvide>

tips:

1.initial为包含reansactions对象

dispacth推荐导入组件实现AppReducer

export default (state, action) =>{
    swtich(action.type){
        case 'DELETE_TRANSACTION':
        return{
            ...state,
            transactions:state.transactions.filter(transaction => transaction.id !== action.payload)
        }
        case 'ADD_TRANSACTION':
        return {
            ...state,
            transactions:[action.payload, ...state.transactions]
        }
        default:
        return state;
    }
}

tips:

1.filter函数实现筛选id功能，从而在别的函数实现set（！=选择id）的函数，实现删除

2.action.payload带入新数据，实现增加功能

子组件使用：

const {addTransaction} = useContext(Globalcontext)   //Global is component


const onSubmIt = e=>{
    addTransaction(newtranscation) //newtranscation is single date object
}

第二天：

tailwind css

1.使用tailwind css库依赖

2.通过class名给子组件css，从而js形式复用css

3.在useeffect中

fetch('https:xxx.xxx.{term}').
then(res => res.json)
.then(data =>{
setImages(data.hits)
},[term]); // 

term值变化，从而可执行useeffect方法，可用于tailwindcss样式动态设置

第三天：

1. 数据input渲染

   handldeChange = input =>e =>{
       this.setState({input}:e.targert.value)
   }
   

   指定input为state元素，firstName为state内元素

   子组件调用：

   <TextField onChange={handleChange('firstName')} defaultvalue={values.firstName}/>
   

2. 点击事件依次控制

   const {step} = this.state;
   

   nextStep = ()=>{
       const { step } = this.state;
       this.setState({
           step: step +1
       });
   };
   

   相应的：

   prevStep = ()=>{
       const { step } = this.state;
       this.setState({
           step: step -1
       });
   };
   

   step控制方式

swtich(step){
    case1:
    return
    ...
    case 2
    ...
}