React开发实（3）react 进阶

1、Google 商店 https://chrome.google.com/webstore/category/extensions?hl=zh
 2、react dev tools 就会变成黑色 
复制代码

1、当组件的 state 和 props 发生变化时， render 会重新执行，渲染页面
  2、父组件 render 执行 默认 子组件的 render 也会执行（shouldComponentUpdate默认情况下为true）
复制代码

{/* <div id='div1' class="container">
    <p>vdom</p>
    <ul style='font-size: 2px'>
        <li>a</li>
    </ul>
</div> */}
{
    tag: 'div',
    props: {
        className: 'container'
        id: 'div1' 
    },
    children: [
        {
            tag: 'p',
            children: 'vdom'
        },
        {
            tag: 'ul',
            props: {
                style: "font-size: 2px"
            },
            children:[
                tag: 'li',
                children: 'a'
            ]
        }
    ]
}
复制代码

1、选择 某个元素  比如 (input) => this.input = input
  2、在 setState 中使用 注意 这个异步函数需要 放在第二个参数 位置， 才能拿到state 更新后的值 
复制代码

1、setState 多次操作可以被合并 
  2、绑定 this 的操作放在 constructor 中
  3、使用 scu 避免子组件多次重复渲染
  4、使用 React.lazy 懒加载
  5、使用 React.memo 检查 props 更改再变化
  const MyComponent = React.memo(function MyComponent(props) {/* render using props */});
  ```
复制代码

1、安装一个 axios
 2、使用 
 3、注意 工作中常规 将 api 请求放在 thunk 中，直接调用 
复制代码

1、先使用 终端 touch item.json 在桌面新建一个文件，添加一点内容
      2、打开 Charles 使用 tools --> map Local
      3、填写端口后和信息
      4、选择桌面 json 文件 
      5、浏览器 再次请求 成功后可以渲染数据
      6、数据渲染 时候 通过更改 state 值 渲染数据 
复制代码

1、安装 yarn add react-transition-group
      2、按照文档引入使用 
      3、
复制代码

1、使用 group 包裹
  2、内层使用 cssTransition
复制代码

import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./app.css";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { list: [] };
  }
  handleAddItem = () => {
    this.setState((prevState) => {
      return {
        list: [...prevState.list, "item"],
      };
    });
  };
  render() {
    return (
      <>
        <TransitionGroup>
          {this.state.list.map((item, index) => {
            return (
              <CSSTransition
                timeout={1000}
                classNames="fade"
                unmountOnExit
                appear={true}
                key={index}
              >
                <div>{item}</div>
              </CSSTransition>
            );
          })}
        </TransitionGroup>
        <button onClick={this.handleAddItem}>toggle</button>
      </>
    );
  }
}
export default App;
复制代码

.show{
    animation: show-product 2s ease-in forwards;
}
.hide{
    opacity: 0;
    transition: all 1s ease-in-out;
}
@keyframes show-product {
    0%{
        opacity: 0;
        color: red
    }
    50%{
        opacity: 0.5;
        color: yellow;
    }
    100%{
        opacity: 1;
        color: green;
    }
} */
.fade-enter{
    opacity: 0;
}
 .fade-enter-active{
    opacity: 1;
    transition: all 1s ease-in-out;
}
.fade-enter-done{
    opacity: 1;
    color: red;
}
.fade-exit{
    opacity: 1;
} 
.fade-exit-active{
    opacity: 0;
    transition: all 1s ease-in-out;
} 
.fade-exit-done{
    opacity: 0;
}
复制代码