说明:react in patterns这个系列是我翻译过来的一些文章。原书的地址在: react-in-patterns 是一本很不错的书。
本指南是针对已经对React的基本理念和他的工作原理比较了解的开发人员。这并不是一个完整的操作指南,而是作为对流行概念设计模式的介绍。社区引入或多或少的范式。它指向你一个抽象思维。例如,它没有谈论Flux,而是谈论数据流。没有谈及高级组件,而是谈论组合。
基础知识
通讯
每个react组件应该像一个独立运行的小型系统。它有自己的状态,输入和输出。
[图片上传失败...(image-ec7401-1524960539084)]
输入
react组件的输入是它的props。
//title.jsx
const Title = (props) => {
return {props.text}
}
Title.propTypes = {
text: PropTypes.string
};
Title.defaultProps = {
text: 'hello word'
};
//app.jsx
const App = () => {
return
}
Title组件仅仅只有一个props输入,它的父组件App应该在使用Title组件是为它提供这个输入。我们也提供了propTypes去定义每个属性类型,react会在控制台为我们打印那些属性传入的是不合法的。当然使用defaultProps是一个比较好的选择。我们可以用它来设置组件的默认值。这样开发人员如果忘记传入某些属性,也能正常的显示了。react并没有严格定义传入的属性的具体内容,它可能是组将的另一个组成部分。
const SomethingElse = ({answer}) => {
return 答案是:{answer}
}
const Answer = () => {
return 42
}
} />
react 为我们提供了一个props.children属性让我们可以访问组件所有的子组件
const Title = ({text, children}) => {
return(
{text}
{children}
);
}
const App = () => {
return(
community
);
}
在这个例子中community
,是作为Title的children传入到Title组件中去的。
输出
react组件的第一个明显的输出是呈现的HTML。在视觉上,这就是我们得到的。
const NameField = ({valueUpdated}) => {
return(
valueUpdated(e.target.value)}/>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: ''}
}
render() {
return(
this.setState({name})} />
);
}
}
最后的想法
把react组将视为一个黑盒子是很令人兴奋的,它有自己的输入,生命周期和输出。由我们来组成这些盒子。这也许是react提供的优势之一。易于抽象和撰写。
个人的一些看法
我们可以把每个组件看成是无状态的函数,传入相同的props我们能得到相同的component,然后在通过view组合这些componet,这样我们就能将状态放在view层统一管理。