关于react antd 双向数据绑定Select组件渲染问题

Question

双向数据绑定后，select变化都会触发table表格重新渲染，如何避免这个问题？
见代码https://codesandbox.io/s/epic-colden-oi3eu

{/*代码1*/}
{/* {getFieldDecorator('gender', {
  initialValue:"female",
  rules: [{ required: true, message: 'Please select your gender!' }],

})(
  <Select
    placeholder="Select a option and change input text above"
    onChange={this.handleSelectChange}
  >
    <Option value="male">male</Option>
    <Option value="female">female</Option>
  </Select>,
)} */}

 {/*代码2*/}
<Select defaultValue="male">
  <Option value="male" >male</Option>
  <Option value="female">female</Option>
</Select>,

说明：代码1使用了双向数据绑定，当select变化时会自动渲染，控制台会输出两次“table表格被触发了”，如果使用代码2改变select时不会输出“table表格被触发了”。
问题：我现在需要再table里获取到gender的值，但不想表格被重新渲染！如果还是使用双向数据绑定该如何修改代码？如果不使用双向数据绑定该如何获取到gender的值，麻烦给出代码。

Answer 1

首先纠正的是, React没有双向绑定的概念, 这样只是受控表单.
再就是使用HOOK重写, 因为React类中比较复合类型数据很难.

import React, { useMemo } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Select, Input, Button, Card, Table } from 'antd';

const { Option } = Select;

const App = props => {
  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  const handleSelectChange = value => {
    console.log(value);
    props.form.setFieldsValue({
      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`
    });
  };

  const { getFieldDecorator, getFieldValue } = props.form;
  const dataSource = useMemo(
    () => [
      {
        key: '1',
        name: '女',
        age: 32,
        address: '西湖区湖底公园1号'
      },
      {
        key: '2',
        name: '男',
        age: 42,
        address: '西湖区湖底公园1号'
      }
    ],
    []
  );
  const columns = useMemo(
    () => [
      {
        title: '性别',
        dataIndex: 'name',
        key: 'name',
        render: text => {
          console.log('table表格被触发了');
          return (
            // <span>{getFieldValue('gender')}</span>
            <span>{text}</span>
          );
        }
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address'
      }
    ],
    []
  );
  return (
    <Card>
      <Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label='Note'>
          {getFieldDecorator('note', {
            rules: [{ required: true, message: 'Please input your note!' }]
          })(<Input />)}
        </Form.Item>
        <Form.Item label='Gender'>
          {getFieldDecorator('gender', {
            initialValue: 'female',
            rules: [{ required: true, message: 'Please select your gender!' }]
          })(
            <Select placeholder='Select a option and change input text above' onChange={handleSelectChange}>
              <Option value='male'>male</Option>
              <Option value='female'>female</Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
          <Button type='primary' htmlType='submit'>
            Submit
          </Button>
        </Form.Item>
      </Form>

      <MyTable dataSource={dataSource} columns={columns} />
    </Card>
  );
};

const MyTable = React.memo(props => <Table {...props} />);

const WrappedApp = Form.create({ name: 'coordinated' })(App);

ReactDOM.render(<WrappedApp />, document.getElementById('container'));