react第二天学习笔记

1.react中css样式的使用方式

　　1)jsx内嵌样式(这第一个大括号表示要在jsx中写js,第二个表示js对象)

　　　　<li style = {{color : '#FF0'}}>jsx内嵌样式</li>

　　2)使用className在通过css文件控制样式

　　　　<li className = 'Red'>使用className在通过css控制样式</li>

　　3)当有多个className时,也就是有多重特征时,可以从npm中下载classnames,因为classNames为方法　　　

　　　　<li className = {classNames("a",{b:true,c:false})}></li>

　　4)使用styled-components在原有元素的样式上包装成新的样式(扩展元素名都需要大写,且第一种表示为模板字符串``,不是引号)

　　　　const Title = styled.h1`

　　　　　　color : #F00;

　　　　`

　　　　const Button = styled.button({

　　　　　　color: 'grey',

　　　　});

　　　　<Title />

 

2.关于组件布局总结

　　1）每个组件渲染时,只能拥有一个根标签,如果根标签不想用div占位时,可以使用Fragment即空组件

　　2)  每个组件原则上应该都有一个文件夹

　　3)  在路径问题上,react会默认寻找当前路径下的index.js,import时可以省略部分

　　4)  在父js中,若仅为导出使用,可用以下格式

　　　　export {default as List} from './list';

 

3.关于组件中的props的总结:

　　1)props是组件传递值的对象,组件可以通过添加属性来传递值,组件的子元素为props中的children值可以为元素等值

　　2)类组件可以直接调用,函数组件需要通过函数名.props去调用

　　3)往props里传数值时,需加大括号表示,否则即为字符串

　　4)在props对象里的值进行检验时,有props-types方法,即用组件自己提供的propsTypes进行数值类型和有无的检验

 

　　　　　　Test.propsTypes = {

　　　　　　　　key : props-types.String.isRequired   （注意不能单独用isRequired,会报错）

　　　　　　}

　　5)对props里的值设置默认值时,组件自己提供了defaultProps

　　　　Test.defaultProps = {　　　//这是函数式组件的使用方法

　　　　　　key : 默认值

　　　　}

 

4.组件的分类:

　　1)根据组件的创建方式不一样分为:

　　　　类组件和函数组件

　　2)根据组件有无state分为:

　　　　有状态组件和无状态组件

　　3)根据控制程度可分为

　　　　完全受控组件:数据全部来自于props,数据源传递

　　　　半受控组件:部分数据受控于数据源(props),部分数据受控于state

　　　　不受控组件:数据受控于内部state的变化

 

5.模板渲染的语法和props向下传递的技巧

　　1)在数据源中,数据都是在构造函数中对state进行初始化操作(注意,得先调用super方法)

　　2)然后利用props向下传递,不能跨组件传递,

　　3)如果传递的内容中有html字符串时,可以用以下方式解译

　　　　<div dangerousSetInnerHTML = {{_html: '<div>html字符串</div>'}} />

　　4)如果在传递的数据中有数组时,可以用js中的map解析

　　　　this.props.list.map(item => {

　　　　　　return (

　　　　　　　　<div key="key值必须给,否则会报错" value = {item.value}/>

　　　　　　)

　　　　})

 

6.react对内部数据进行动态修改时使用setState修改数据的两种方式:（这个方法可以有两个参数，　第一个参数可以有两种情况）

　　1)this.setState({对象里是state中要修改的内容})　　　　第一个参数为对象

　　2)this.setState((preState,preProps) => {　　　　上一次的State和上一次的Props

　　　　return  {}

　　)}

　　3)这个方法有第二个参数，因为这个方法是异步的,所以第二个参数是回调函数,参数是改变后的　state和props