学习Taro的第二天

生命周期:

componentWillMount :页面加载时触发,一个页面只会调用一次,此时页面 DOM 尚未准备好,还不能和视图层进行交互

componentDidMount: 页面初次渲染完成时触发,一个页面只会调用一次,代表页面已经准备好了,可以和视图层进行交互

两个先执行componentWillMount ,在执行componentDidMount。

componentWillReceiveProps(nextProps) 已经装在的组件接收到新属性前调用

shouldComponentUpdate(nextProps,nextState) 组件是否需要更新,返回false不继续更新,否则继续走更新流程。

componentWillUpdate(nextProps,nextState) 组件即将更新

componentDidUpdate(prevProps,prevState) 组件更新完毕

componentWillUnmount() 组件卸载的时候触发

引用样式文件:如引入图片,音频,视频等....,其中最常见的是引入.css文件 import ./index.css。

引入图片等文件,常常是页面内部某个函数自带的 src=‘xxxx’去引入图片路径,这就会发现图片路径也对,函数自身也没有问题,但是,就是无法正常显示出图片或者视频音频之类的,这是因为没有进行正确的导入需要先进行 import 自定义名字 from '../images/1.jpg',之后可以根据自己定义的自定义名字 放入 src中就可以了。

组件化:基本上是万物皆组件,然后一个一个组件包裹起来成一个页面或一个项目。

这里就是在父组件中给子组件进行传值,直接获取定义好的this.state.xxx,进行赋值。
这是子组件进行接收父组件的传递过来的数据.。

          这里子组件接收父组件传递过来的数据,用的是this.props.xxx。其中props其值,是不可以进行改变的,就是说,你传递过来是个啥,就是个啥,并且其值,是不可以进行修改的。props是只读的。

正确的使用state:不能直接给state 这样进行赋值this,state.xxx='hello',正确的赋值方式是 this.setState({comment: 'hello'}), setState() 函数是唯一能够更新 this.state 的地方。

this.state和props一定是异步更新,所以在进行setState后紧跟打console.log去打印某个值,这个值肯定是提前定义的默认值,并不是进行setState更新后的值。

this.setState({ counter: 1 }, () => { // 在这个函数内你可以拿到 setState 之后的值 }) 这样就可以拿到setState更新后的值,或者是进行延时操作setTimeout。

这里需要注意Taro中,return 里面我没发现可以写if的或者for的地方,需要用到if进行判断的时候同一使用三元表达式来进行表述,需要用到循环的地方同一进行map遍历,这俩不会,自行百度或者留言。外加一点,与或非,可以在return当中使用其中 如果你默认的变量 不进行改变或者自身的值不是布尔类型,一律默认为true。

Taro的事件处理,需要注意的是,不管是官方的还是你自己写的,一点要在名字之前加on,因为,你不加on人家就不理你,不认同你这个是事件,事件基本上基础的就是那些点击事件,其中需要注意的是,在于事件传参,这个很简单,传递过去的参数,可以在当前事件的所有地方进行使用。

Refs 引用: 用于父子交互中,父组件调用子组件的元素或者函数,使用的也很简单

直接在父级元素调用子组件,在子组件中定义一个ref=‘xxx’

然后根据项目需求调用,如调用子元素的,一个函数,直接this.refs.之前ref定义的名字.方法名字。就可以获取到子元素的方法,同理 最后点的是变量就是拿到的变量。

在项目当中根据需求,查看符号需求的方法,一定要在做之前进行查看,这样不会因为某些原因导致一个方法或者api,提高了原本简单的事物的难度。

你可能感兴趣的:(学习Taro的第二天)