React中父子组件的交互实例

React常常被提到的就是组件化，但任何事物总是有利有弊，正如在程序设计中能让你显得高级些的必然离不开设计模式和重构了，初看设计模式，总有种将问题复杂化的感觉，其实一切的设计模式无非是追求高內聚低耦合，以达到逻辑清晰，便于维护和扩展，组件化也是基于这个目的。在简单的需求条件下，还采用模式设计，不仅费时，也会被模式本身搞的晕头转向，但基于学习设计思想的缘故，还是越简单越容易理解。

一个列表显示很能体现React组件化的特点。

1.需求

获取网路电影名，点击选择后，字体变红，再次点击，字体恢复为黑色。

2设计

a 类设计

为体现组件化思想，每一列表项为一个子类，列表作为一个容器类。当然可以用一个列表项搞定，简单又清晰，但是当项目越来越大时，模块化设计的好处才能慢慢体现出来。

b 主要操作

获取数据： 访问网络获得电影列表，对获取信息进行处理，以满足所需。

显示：显示电影列表，选择的为红色，未选为黑色

点击：选择开关对应红／黑显示。

c 父子组件职责

父组件：显示电影列表，保存电影列表信息，选中的电影信息

子组件：显示单项电影信息，根据是否选中，显示不同

d 父子组件沟通

父组件告知子组件：单项电影信息，是否选中。

子组件告知父组件：单项电影被点中。

3交互重点

a.通过fetch获取网路信息，并以promise的链式函数对数据进行处理。

b.父组件告知子组件，通过props告知子项信息。

c.子组件告知父组件，通过props中的回调函数告知父组件，哪个子项被点击。

4代码

class MyListItem extends PureComponent{

_onPress = () => {

}

render(){

return (

);

}

}

export default class MyCheckList extends PureComponent{

constructor(props){

super(props);

this.state = {

selected: (new Map(): Map),

films:[]

}

}

componentDidMount(){

fetch('https://facebook.github.io/react-native/movies.json')

.then((response) => response.json())

.then((responseJson) => {

return Array.from(responseJson.movies).map((film, index) => {

return {

id:index.toString(),

...film

}

})

})

.then((responseMoviesJson) => {

this.setState({

films: responseMoviesJson

});

// console.log(responseMoviesJson);

})

.catch((error) => {

console.error(error);

});

}

_onPressItem = ( id: string) => {

this.setState( (state) => {

const selected = new Map(state.selected);

selected.set(id, !selected.get(id));

return ({

films: state.films,

selected: selected

});

}

);

}

render(){

return (

data=

extraData=

renderItem={

return (

key=

id=

onPressItem=

selected=

title=

);

}

}

keyExtractor={

(item,index) => item.id

}

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

paddingTop: 22

},

item: {

padding: 10,

fontSize: 18,

height: 44,

},

})