hooks练习

1.实现一个圆角、带边框、有文字、带有点击事件的按钮

export function test(){
return (
<>

touch me

</>);
}
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.在1的基础上，实现选中和反选的功能，即初始态是一种背景色（比如是白色），选中后是另一种背景色（比如黄色，代表被选中），再次点击可取消

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.在2的基础上，实现每当按钮变为黄色时，延迟1000ms弹出一个提示（gc-ui的Toast组件）

如果组件在定时器到期前卸载，而没有清除定时器，就会有一个内存泄漏。

因此使用完定时器，需要及时清除定时器。

类似的设置有数据库连接等，在获取完数据后需要及时清理。

useEffect的返回值是一个清理函数，若是当前MyTouchView组件被卸载了，就会调用这个清理函数来清理定时器。

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.在3的基础上，实现记录每次点击时的时间，并在累计点击超过10次后，一次性打印出所有已经记录的时间

export function MyTouchView(){
const [isPress,setIfPress]=useState(false);
const [count,setCount]=useState(0)
const timeRef = useRef([])//引用一个不需要渲染的值
useEffect(() => {
if(count===10){
console.log(timeRef.current)
timeRef.current=[];
setCount(0)
}
}, [count]);
useEffect(() => {
if(isPress){
const timer = setTimeout(()=>{
Toast.open(‘提交’,{
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}>
touch me
);

}

5.在3的基础上，在你的页面中使用这个按钮，把延时弹出提示的逻辑封装到一个函数中，并保证行为与任务三一致（即仅当按钮变黄后才会弹）

如果使用changeText1，每次ispress改变，就会执行useeffect里面的操作，然后就会调用changText1函数，如果不用usecallback的话，每次调用的changeText1都是新的函数，又会执行useeffect里面的操作，又调用新的changeText1

}, [isPress,changeText])

6.在3的基础上，在按钮渲染过程中实现一个复杂计算（比如for循环实现从1加到1000000），计算结果作为按钮展示的文本，并保证每次点击按钮都不会重新计算

const result= useMemo(() => {
let cnt=0;
for(let i=0;i<1000000;i++){
cnt+=i;
}
console.log(‘cal’)
return cnt;
},[])

7.实现一个自定义组件，这个组件没啥功能，但可以添加子组件，使用方式如下：希望实现的功能时，在你的页面中嵌套使用5个该组件（涉及到children的使用），并在每一层组件中都读取最外面页面中的一个值并打印出来

export function MyComponent(props){
const value=useContext(MyContext)
console.log(value);
return(
{props.children}
{value}
)
}

猜你喜欢