React基础(react基础语法)
React 基础学习
react组件状态(state)
react中每个组件都可以拥有自己的状态数据(该状态是组件私有的,完全受控于当前组件)。react中的状态数据存放于组建中的state节点中,可以通过setState
进行修改。
直接修改state
不会出发重新渲染
构造函数是唯一可以给this.state
赋值的地方
state
的更新是异步的(可以给setState
传递函数来解决异步的问题)
state
将在浏览器事件结束的时候统一进行更新,以减少不必要的渲染(eg:多次更新同一state
,可以合并到最后一次更新,减少渲染)
react中的每个组件(函数组件除外)都继承自React.Component。当组件中需要拥有自己的状态时,组件需要实现constructor
方法并且在其中定义state
,js中,当有继承关系时,子类需要在构造函数中使用super()
调用父类的构造函数,所以在含有构造函数的的 React 组件中,构造函数必须以 super(props)
开头。
react组件状态(props)
react中通过props
进行参数传递,参数自上而下的传递,当组件中嵌套结构的时候,props
中会有默认children
,children
的值嵌套的数据,可能是任何形式的数据,嵌套为字符串则children
为字符串,嵌套为组件则children
的值为组件。
在vue中,当子组件的中的数据来源于父组件的时候,在子组件中修改父组件的值,一般需要emit一个事件并在父组件中实现才可以正确的将单向数据流中的数据进行修改。react中可以将数据管控在父组件中,将函数作为参数传递给子组件。在子组件中调用即可,无需抛出事件。
生命周期
一般情况下,当props
或者state
发生变化时会出发渲染更新,但是当render
中不依赖props
或者state
的时候,不会触发更新,可以使用forceUpdate
(调用render
的情况下不调用shouldComponentUpdate
,但这种情况下当前组件的子组件会触发正常的生命周期方法)
函数组件
当组件中只有render
函数,且不包含state
时,优先使用函数组件。
函数组件:顾名思义就是当前组件以函数的形式实现。不需要继承React.Component
.该函数接收props
作为参数,返回需要渲染的元素。
状态提升:多个组件反映相同的变化数据,将共享状态提升至最近的公共父组件。与函数组件相结合,减少子组件的复杂度
ref&Refs
// todo
作者:青桔啊山竹
链接:https://juejin.cn/post/7036668730620936222
伪原创工具 SEO网站优化 https://www.237it.com/