React中state和props分别是什么?
整理一下React中关于state和props的知识点。 在任何应用中,数据都是必不可少的。我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据。React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在 propsReact的核心思想就是组件化思想,页面会被切分成一些独立的、可复用的组件。 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是 用法假设我们现在需要实现一个列表,根据React组件化思想,我们可以把列表中的行当做一个组件,也就是有这样两个组件: 先看看 import Item from "./item"; export default class ItemList extends React.Component{ const itemList = data.map(item => <Item item=item />); render(){ return ( {itemList} ) } } 列表的数据我们就暂时先假设是放在一个 在 export default class Item extends React.Component{ render(){ return ( <li>{this.props.item}</li> ) } } 在 只读性
默认参数在组件中,我们最好为 Item.defaultProps = { item: 'Hello Props',}; Item.propTypes = { item: PropTypes.string,}; 关于 optionalArray: PropTypes.array,optionalBool: PropTypes.bool,optionalFunc: PropTypes.func,optionalNumber: PropTypes.number,optionalObject: PropTypes.object,optionalString: PropTypes.string,optionalSymbol: PropTypes.symbol, 注意, 这些知识基础数据类型,还有一些复杂的,附上链接: https://facebook.github.io/react/docs/typechecking-with-proptypes.html 总结
state
一个组件的显示形态可以由数据状态和外部参数所决定,外部参数也就是 用法export default class ItemList extends React.Component{ constructor(){ super(); this.state = { itemList:'一些数据',} } render(){ return ( {this.state.itemList} ) } } 首先,在组件初始化的时候,通过 setState
比如,我们经常会通过异步操作来获取数据,我们需要在 componentDidMount(){ fetch('url') .then(response => response.json()) .then((data) => { this.setState({itemList:item}); } } 当数据获取完成后,通过 当我们调用 注意:通过
export default class ItemList extends React.Component{ constructor(){ super(); this.state = { name:'axuebin',age:25,} } componentDidMount(){ this.setState({age:18}) } } 在执行完
this.setState({ name:'xb' },()=>console.log('setState finished')) 总结
区别
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |