Why fusion supports two usages

[alibaba-fusion]

Why fusion supports two usages

[bindoon]

• defaultValue: only work in the first render
• value: for you to control the component value, and you should use onChange to modify the value. that's why called under controlled

you can see the detail in https://reactjs.org/docs/forms.html#controlled-components

[youluna]

1. children v.s. props

• children for simple use, and it also makes information more intuitive to a human reader(developer)

<Select>
    <Select.Option value="female">female</Select.Option>
    <Select.Option value="male">male</Select.Option>
    <Select.Option value="secrecy">secrecy</Select.Option>
</Select>;

• props for a large amount of data sources, maybe you get the data from a remote server with a considerable length

<Select dataSource={dataSource}/>

2. defaultValue v.s. value
   This involves a concept of React controlled-vs-uncontrolled-components

• When you use value, the component is controlled and you have full control over the components.It won't change value unless you set the value explicitly.
• When you use defaultValue only, the components is an uncontrolled component. You don't have to care about the data flow inside component.

defaultValue for basic usage and value for advanced usage, see usage demo

[anyexinglu]

@bindoon @youluna

Thank you for your patient replies, to my shame, I didn't make the question clear:

1. children v.s. props

<Select>
    <Select.Option value="female">female</Select.Option>
    <Select.Option value="male">male</Select.Option>
    <Select.Option value="secrecy">secrecy</Select.Option>
</Select>
// Attention: Tab.Item has title
<Tab>
    <Tab.Item title="Home">Home content</Tab.Item>
    <Tab.Item title="Documentation">Doc content</Tab.Item>
    <Tab.Item title="Help">Help Content</Tab.Item>
</Tab>

vs

<Select
  dataSource={[
    { label: 'female', value: 'female' },
    { label: 'male', value: 'male' },
    { label: 'secrecy', value: 'secrecy' }
  ]}
/>
// Tab's dataSource seems same as Select's (with label & value, without title)
<Tab
  dataSource={[
    { label: 'Home', value: 'Home content' },
    { label: 'Documentation', value: 'Doc content' },
    { label: 'Help', value: 'Help Content' }
  ]}
/>

The second one seems easier to remember for developers, and more testable for fusion authors.

Obviously, the first one also has some supporters, whatever, a component library can teach users how to write code, supports two usages may increase the maintenance and communication cost, I thought it's not necessary.

2. defaultValue v.s. value
   I've modified the DatePicker example

defaultValue isn't a good design in react? —— by my leader...

[anyexinglu]

咦？