提取组件
你可以将组件切分为更小的组件,这没什么好担心的。
例如,来看看这个Comment组件:
这个组件接收author(对象)、text(字符串)、以及date(Date对象)作为props,用来描述一个社交媒体网站上的评论
这个组件由于嵌套,变得难以被修改,可复用的部分也难以被复用
所以让我们从这个组件中提取出一些小组件
- 首先,我们来提取Avatar组件:
Avatar作为Comment的内部组件,不需要知道是否被渲染
因此我们将author改为一个更通用的名字user
建议从组件自身的角度
来命名props,而不是根据使用组件的上下文
命名
现在我们可以对Comment组件做一些小小的调整
接下来,我们要提取一个UserInfo组件,用来渲染Avatar旁边的用户名
这可以让我们进一步简化Comment组件
提取组件一开始看起来像是一项单调乏味的工作,但是在大型应用中,构建可复用的组件完全是值得的
当你的UI中有一部分重复使用了好几次(比如,Button、Panel、Avatar),或者其自身就足够复杂(比如,App、FeedStory、Comment),类似这些都是抽象成一个可复用组件的绝佳选择,这也是一个比较好的做法
Props的只读性
无论是使用函数或是类来声明一个组件,它决不能修改它自己的props。
- 来看这个
sum
函数
类似于上面的这种函数称为“纯函数”,它没有改变它自己的输入值,当传入的值相同时,总是会返回相同的结果
与之相对的是非纯函数,它会改变它自身的输入值
React是非常灵活的,但它也有一个严格的规则:
所有的React组件必须像纯函数那样使用它们的props
当然,应用的界面是随时间动态变化的,State可以在不违反上述规则的情况下,根据用户操作、网络响应、或者其他状态变化,使组件动态的响应并改变组件的输出。
- function形式
es6形式
属性
state属性
存储组件自身需要的数据。可读可写,它的每次改变都会引发组件的更新。
每次数据的更新都是通过修改 state 属性的值,然后 ReactJS 内部会监听 state 属性的变化,一旦发生变化,就会触发组件的 render 方法来更新 DOM 结构。
props属性
props 是一个对象,是组件用来接收外面传来的参数的。
组件内部是不允许修改自己的 props 属性,只能通过父组件来修改。上面的 getDefaultProps 方法便是处理 props 的默认值。