TitianHouse-CP Experience

1.React 函数式组件声明:Hook

jsx harmony
function TriangleArea({ steps, borderWidth }) {
  return (
    <div className="steps opporutnity">
      {steps.map((step, $index) => {
        const prev = steps[$index - 1];
        const {
          id,
          text1,
          text2,
          active,
        } = step; 
        return (
          <div className={['step', active ? 'active' : null].join(' ')} key={id}>
            {$index > 0 ? (
              <div className="triangle-area">
                <div style={{ borderWidth: `${borderWidth}px` }} className={['triangle-left-block', prev && prev.active ? 'active' : null].join(' ')} />
                <div style={{ borderWidth: `${borderWidth}px` }} className="triangle-left" />
              </div>
            ) : null}
            <div className={['num', $index > 0 ? 'm-l-25' : null].join(' ')}>
              {$index + 1}.
            </div>
            <div className="text">
              <span>{text1}</span>
              {text2 ? (<span>{text2}</span>) : null}
            </div>
          </div>
        );
      })}
    </div>
  );
}
TriangleArea.propTypes = {
  steps: PropTypes.array.isRequired,
  borderWidth: PropTypes.number,
};
TriangleArea.defaultProps = {
  borderWidth: 0,
};

通过useState、useEffect 控制组件状态和状态变化时的监听

 javascript
  //设置了组件内 初始值为[]的 tree状态 和 设置该状态的方法setTree
  //类私 class component的 this.state ={tree:[]} setState({tree:[]})
  const [tree, setTree] = useState([]);
  //组件tree状态 变化时 的回调
  useEffect(() => { 

  }, [tree]);

  //组件第一次渲染时的回调 类似 class component 中的componentDidMount、componentWillUnmount
  useEffect(() => { 
      console.log('componentDidMount')
   return () => {
      console.log('componentWillUnmount')
         };
  }, []);
  //组件状态变化时的回调 类似 class component 中的componentDidUpdate
  useEffect(() => { 

    });

react hook 学习链接：https://react-1251415695.cos-website.ap-chengdu.myqcloud.com/docs/hooks-intro.html

2.@emotion/styled

jsx harmony
import styled from '@emotion/styled';
export const FilterWrapper = styled.div`
  position: relative;
  width: inherit;
`;
export const NumberCircle = styled.div`
  border-radius: 30px;
  color: #ffffff;
  background-color: rgb(255, 199, 44);
  width: 18px;
  height: 18px;
  font-size: 12px;
  text-align: center;
`;
<FilterWrapper>
<NumberCircle/>
</FilterWrapper>

这种写法的优点:

1. 不会弄脏全局的css 样式 @emotion/styled 会替我们给标签生成唯一的class
   
2. 可用于组件样式的导出。
   
3. 不用新建样式文件,也能用sass、css、less等写法