1. 实现dom元素的显示和隐藏
{
(form.getFieldValue('name') === 'lisi') && (<div>要显示的div</div>)
}
2. select的循环使用
<Select>
{
despatchOptions.map((despatch: any) => (
<Option key={despatch.despatch_mode} value={despatch.despatch_mode}>
{despatch.despatch_name}
</Option>
))
}
</Select>
3. 定义要反映在视图上的变量，一定要用useState，否则数据和视图不同步
4. react vs vue数据流的区别
vue
model <-> view model <-> view
view model实现了数据的双向绑定
举例子, input 的 v-model绑定的data数据, input 输入框 UI 层发生变化, 数据就会同是跟着变, 比如列表渲染, 数据变了, UI 层也发生变化
react
model -> 逻辑处理 -> view
事件 -> 逻辑
数据状态的单向数据流
举例子, input绑定的状态数据, input 输入框 UI 层发生变化, 必须在他的onchange回调函数里面去用setstate 改变状态数据
5. react 状态提升
在官方文档中的状态提升这一块内容, 举了一个例子, 有两个不同的input 输入框, 在一个input输入一个温度, 另一个input立即转化为不同单位的温度,
正常来说两个input组件有自己的温度state, 而react规定,每个组件自己的state不能用于别的组件, 而且只能自己去setstate改变状态, 但是很明显两个input要公用一个state, 然后就把组件的state提升到父组件里面, 让父组件去管理,下发状态, 子组件改变后, 触发父组件的函数, 让父组件用setstate改变state, 改变状态之后, 父组件将这个温度流向用到这个状态的所有组件
6. react 多次渲染问题
父组件的渲染会不会引起子组件的重新渲染
function Son() {
console.log('child render!');
return <div>Son</div>;
}
function Parent(props) {
const [count, setCount] = React.useState(0);
return (
<div onClick={() => {setCount(count + 1)}}>
count:{count}
{props.children} // 这样写不会重新渲染
<son></son> // 这样写会重新渲染 </div> );
}
function App() {
return (
<Parent>
<Son/>
</Parent>
);
}
const rootEl = document.querySelector("#root");
ReactDOM.render(<App/>, rootEl);
使用react.memo包裹子组件, 也不会引起子组件重新渲染
function Son() {
console.log('child render!');
return <div>Son</div>;
}
var Memoson = React.memo(Son)
function Parent(props) {
const [count, setCount] = React.useState(0);
return (
<div onClick={() => {setCount(count + 1)}}>
count:{count}
<Memoson></Memoson>
</div>
);
}
function App() {
return (
<Parent>
<Son/>
</Parent>
);
}
const rootEl = document.querySelector("#root");
ReactDOM.render(<App/>, rootEl);
