1. Implement a button with rounded corners, borders, text, and click events
export function test(){
return (
<>
</>);
}
const style=StyleSheet.create({
container:{
display:“flex”,
flexDirection:“row”,
justifyContent:“center”,
alignItems:“center”,
height:“100%”
},
button:{
borderColor:“black”,
borderWidth:5,
justifyContent:“center”,
alignItems:“center”,
borderRadius:20,
height:50,
width:200,
backgroundColor:“yellow”
}
});
2. On the basis of 1, realize the function of selection and inversion, that is, the initial state is a background color (such as white), and after selection is another background color (such as yellow, which means it is selected), click again to cancel
export function test(){
return (
<>
<View style={style.container}>
<MyTouchView ></MyTouchView>
</View></>);
}
export function MyTouchView(){
const [isPress,setIfPress]=useState(false);
function handleClick(){
setIfPress(!isPress);
}
return (<TouchableOpacity style={[style.button,{backgroundColor:isPress?'yellow':'red'}]}
//在这行卡住了，原因是不知道style这里可以用数组，主要是不熟悉语法
//style支持对象和数组
onPress={handleClick}>
<Text >touch me</Text>
</TouchableOpacity>);
}
const style=StyleSheet.create({
container:{
display:“flex”,
flexDirection:“row”,
justifyContent:“center”,
alignItems:“center”,
height:“100%”
},
button:{
borderColor:“black”,
borderWidth:5,
justifyContent:“center”,
alignItems:“center”,
borderRadius:20,
height:50,
width:200,
backgroundColor:“yellow”
}
});
3. On the basis of 2, realize that whenever the button turns yellow, a prompt pops up with a delay of 1000ms (the Toast component of gc-ui)
If the component unmounts before the timer expires without clearing the timer, there will be a memory leak.
Therefore, after using the timer, it is necessary to clear the timer in time.
Similar settings include database connections, etc., which need to be cleaned up in time after the data is obtained.
The return value of useEffect is a cleanup function. If the current MyTouchView component is uninstalled, this cleanup function will be called to clean up the timer.
export function MyTouchView(){
const [isPress,setIfPress]=useState(false);
useEffect(() => {
if(isPress){
const timer = setTimeout(()=>{
Toast.open(‘提交’,{
duration:1000});
},1000)
return ()=>clearTimeout(timer)
}
}, [isPress])
function handleClick(){
setIfPress(!isPress);
}
return (
<TouchableOpacity
style={[style.button,{backgroundColor:isPress?'yellow':'red'}]}
onPress={handleClick}>
<Text >touch me</Text>
</TouchableOpacity>);
}
4. On the basis of 3, record the time of each click, and print out all the recorded time at one time after the cumulative click exceeds 10 times
export function MyTouchView(){ const [isPress,setIfPress]=useState(false); const [count,setCount]=useState(0) const timeRef = useRef([])//Reference a value that does not need to be rendered useEffect(() => { if(count===10){ console.log(timeRef.current) timeRef.current=[]; setCount(0) } }, [count]); useEffect(() => { if(isPress) { const timer = setTimeout(()=>{ Toast.open('submit',{ duration:1000}); },1000) return ()=>clearTimeout(timer) } }, [isPress]) function handleClick() { setIfPress(!isPress); setCount(count+1); const time=new Date().toLocaleTimeString();
//console.log(time)
timeRef.current.push(time);
}
return (
<TouchableOpacity
style={[style.button,{backgroundColor:isPress?‘yellow’:‘red’}]}
onPress={handleClick}>
);
}
5. On the basis of 3, use this button in your page, encapsulate the logic of the delayed pop-up prompt into a function, and ensure that the behavior is consistent with task 3 (that is, it will only pop up when the button turns yellow)
If you use changeText1, every time the ispress is changed, the operation in useeffect will be executed, and then the changText1 function will be called. If usecallback is not used, the changeText1 called each time is a new function, and the operation in useeffect will be executed, and then called new changeText1
const changeText = useCallback(() => {
const timer = setTimeout(()=>{
setCount(count+1);
console.log(“changeText +1”)
},1000)
//console.log(“press”)
return ()=>clearTimeout(timer)
}, [isPress]);
function changeText1(){
const timer = setTimeout(()=>{
setCount(count+1);
console.log(“changeText1 +1”)
},1000)
//console.log(“press”)
return ()=>clearTimeout(timer)
}
useEffect(() => {
changeText();
console.log(“null”)
}, [changeText])
useEffect(() => {
changeText();
console.log(“depent on ispress”)
timeOut();
}, [isPress,changeText])
6. On the basis of 3, implement a complex calculation in the button rendering process (for example, the for loop realizes adding from 1 to 1000000), the calculation result is used as the text displayed by the button, and it is guaranteed that the button will not be recalculated every time the button is clicked
const result= useMemo(() => {
let cnt=0;
for(let i=0;i<1000000;i++){
cnt+=i;
}
console.log(‘cal’)
return cnt;
},[])
7. Implement a custom component. This component has no function, but you can add subcomponents. The usage method is as follows: When you want to realize the function, use 5 nested components in your page (involving the use of children), And in each layer of components, read a value in the outermost page and print it out
export function MyComponent(props){
const value=useContext(MyContext)
console.log(value);
return(
{props.children}
)
}