react常用css样式的使用

Wenn 于 2022-10-17 发布

image-20221012210812997

image-20221013125409193

strictMode严格模式

  <StrictMode>
    <Hom
  </StrictMode>
  <Profile>
  1. 检查不安全的生命周期 例如UNSAFE--componentWillMount

    如果在上面代码中仅在Home中设置了严格模式，且在Home中方使用了compeonentWillMount，则不会提示哪个组件除出了问题，将会对所有组件进行提示，如果使用了UNSAFE-componentWillMount，则会提示哪个组件出现了问题

  2. 使用过时的ref API

    ref使用字符串

  3. 意外的副作用

    这个组件的constructor会调用两次

    开发环境故意

  4. 废弃的findDOMNode

  5. 过时的context API

React中的css

  1. 内联样式

    样式不会有冲突

    动态获取state中的状态

  2. 普通css

    如果直接使用css选择器进行样式编辑，则会因外层标签可能出现的权重过高导致被层叠，所以需要对标签进行精准css样式，则需要与子代选择器配合使用，较为麻烦

  3. cssModule

    无法动态调整样式，依旧需要使用内嵌样式进行调整修改

  4. css in js

    将css写入js中 All in JS

    • styled-components

      需要配合模板字符串进行使用，但是该库并非是官方嵌入，需要另行添加

      具有三大特点

      1. props穿透
      2. attrs的使用
      3. 传入state作为props属性，届时可以动态修改

模板字符串

模板字符串可以调用函数

    const name = 'xi'
    const age = 20

    function foo(...args){
      console.log(args)
    }

    foo`my name is ${name},age is ${age}`

在调用时会以参数传入

放入一个数组，将传入值进行切割，以插值为分割，将其他元素按位放入0位的数组，剩余插值及逆行安慰匹配，放入最外层数组

如果传入一个函数，将会判断传入值是否为函数，如果是函数，则会直接运行，得到结果，最后转化

如果想在下面的子标签元素中使用对应的样式，则直接使用styled生成对应的组件即可

甚至可以使用嵌套来进行快速设置样式，less等语法

常规开发模式中使用组件化进行导入并解构即可

const InputWrapper = styled.input.attrs({
	placeholder: 'password',
	bColor: 'red',
})`
	background-color: #0ff;
	border-color: ${(props) => props.bColor};


const InputWrapper = styled.input.attrs({
	placeholder: 'password',
	bColor: 'red',
})`
	background-color: #0ff;
	border-color: ${(props) => props.bColor};
	color: ${(props) => props.color};
`
//如果想拿到this.state中的颜色，可以在模板字符串中直接使用函数和props，因为this。state中的参数依旧会与初始化attrs中的设置混用
//css属性需要在模板语法中进行书写，也可以在标签上直接添加，但是attrs更为强大
export default class App extends PureComponent {
	constructor(props) {
		super(props)

		this.state = {
			color: 'red',
		}
	}
	render() {
		return (
			<div id="app">
				App
				<InputWrapper type="text" />
				<InputWrapper type="password" color={this.state.color} />
				<h2 className="title">我是app的标题</h2>
				<Home />
			</div>
		)
	}
}

styled的继承

const ButtonWrapper = styled.button`
	padding: 10px 20px;
	color: #0ff;
	border: 2px solid #f00;
`
//如果样式相同很多，可以抽离出来进行继承
const MainButton = styled(ButtonWrapper)`
	background-color: #0f0;
`

image-20221017221712642

image-20221017221726337