react学习笔记

• onClick={() => alert('click')},onClick驼峰大写，箭头函数
  onClick={alert('click')}
• 在使用JavaScript classes时，必须调用super()，方法才能在继承父类的子类中正确获取到类型的this
• onClick={() => props.onClick()}可以简化onClick={props.onClick}
• 组件渲染：React可以是用户自定义的组件
  • 组件末尾闭合，如:<Welcome />
  • 组件传的值不能用括号，如错误<Welcome name=("sara") />,此为最基础的错误，改为<Welcome name="sara" />
• 组件名称必须以大写字母开头，且使用时，必须定义或者引入
• class --> className 驼峰命名法
• 重新渲染组件this.setState({comment: ‘Hello’});
• 构造函数是唯一能够初始化this.state的地方
• 生命周期：组件初始化–>挂载（分为componentWillMount,render,componentDidMount三个时期）–>组件更新–>卸载
• index.js引入(import)的组件名应与另一组件暴露(export default)出的名字一致
• render()渲染所要显示在屏幕上的内容，包含在return里面
• return()的内容只能包含一个大的JSX
• 绑定事件，若要写js函数，必须用大括号{}
• map()函数对数组做循环，methods.map((item) => {name:item.itemName})
• 组件被创建的时候，构造函数constructor会自动被执行
• 组件：页面中的一部分
• 父组件通过属性的形式向子组件传递参数，子组件通过props方式接收来自父组件的参数;子组件与父组件通信
• 若想只要一层div包裹，可使用<React.Fragment></React.Fragment>
• 在react中加css样式，style={{background: 'red',color: 'white'}};className='.btn',则需要新建style.css,写.btn {background: red;color:white}，再将css文件引入
• 弹性盒模型使用display:flex布局，删除其他列不影响布局，且能自适应
• 看ant-mobile文档：

   1.组件代码有标注：是否使用List.Item作为children，如果不，上方有定义const CoustomChildren = props => ()
   2.extra为可选“提示”，其样式在CoustomChildren中有定义，若有图标，也可在该组件内写出
   3.title为日期选择弹窗的标题
   4.看文档中的例子熟悉用法，要看懂API里面的属性，且属性不可更改```
  

• 直接在组建中加样式是驼峰形式，例如style={{textAlign: center}},内联css还是原来的text-align: center;
• 布局越精简越好，组件分得越细越好
• 先写下方的tabs，四个tabs可以作为一个组件，每个组件里面的内容大同小异，又可以分为四个小组件，在引用时，使用map()循环组件
• css样式加上position后，一定要加宽度，不然布局会撑不开
• 看样例的时候，可以选择简单的上手学习，data={district},数据源为数组district = {[value],[label]},cols代表列，cascade代表是否联动

•   <Tabs 
        tabs={this.tab2} //必选项；其中tab2为数组，数组里面是键值对
        initiaPage={1} //可选项；初始默认页面为第一页
        tabBarPosition="buttom" //tab标签停靠位置，为底部
        rederTab={tab => {return 布局样式}}  //此处即为渲染样式> 
        <div>页面内容</div>
   </Tabs>
  

• 当图标等有多个类名的时候，若是从键值对里面取值，可以使用+，例如<i className="iconfont"+{tab.icon}></i>;键值对为tab2: [{title: "卫生环境",sub: 1, icon: 'icon-weishenghuanjing'}]
• 利用打印输出检查返回值内容console.log("tab:",tab)
• 先写下方的tabs，四个tabs可以作为一个组件，每个组件里面的内容大同小异，又可以分为四个小组件，在引用时，使用map()循环组件
• 使用Tabs组件后，在渲染完成后的div里面找到的类名添加样式.am-tabs {position:'fixed',bottom:'0'}，此时效果是完美的，覆盖样式，直接实现，但是问题来了，之前的组件完全失效。
  因此找找失效的原因是什么，一步一步找哪里可以添加样式。
• 使用全局css来达到目的话，部分HTML标签的css样式会失效。
  解决办法：在标签后直接加style={{position:'fixed',bottom:'0'}}，这样就可以实现效果了。但是会出现一个问题，宽度缩水了，此时就应该用上前几天的笔记，使用了position:absolute之后,width:100%
• 报错"ReactDOM is undefined";
  解决办法：引入import {ReactDOM} from "react-dom"
• Tabs组件默认的是下划线蓝色，被点击栏显示蓝色，未被点击栏是黑色（参考链接：https://github.com/ptomasroos/react-native-scrollable-tab-view/issues/420
• Tabs组件底部样式设置：tabBarUnderlineStyle={{borderBottomWidth : '0.1' , borderBottomColor : 'red'}},这个颜色是原本的默认蓝色与红色重合
• Tabs组件底部去掉下划线：tabBarUnderlineStyle={{backgroundColor:'white' , borderColor : 'white'}}，但是该方法只是让下划线变成白色，实际上还是存在的
• Tabs组件底部去掉下划线：tabBarUnderlineStyle={{border: '0 white'}},这才是去掉了下划线
• Tabs组件被点击栏样式设定：tabBarActiveTextColor="#20B53F"
• Tabs组件未被点击栏样式设定：tabBarInactiveTextColor="#D0DAD9"
• demo不能直接复制，要自己写，要用什么，就拿什么，特别是一些API文档里的属性
• 当属性或者数据过多且复杂的时候，可以采用打印console.log()的方式，查看输出内容
• 尽量用className写外联元素，不要写在里面
• scss:className的单词之间以“-”连接，如z-panel-body,相同的值使用变量如：$--border-color:#f0fef2,使用时则是background-color: $--border-color;
• js:变量名和普通函数名如果是多个单词，请使用驼峰形式如myName，构造函数名和class类名，首字母大写、多个单词以驼峰形式如MyComponent
• js:声明函数超过3个时，使用对象参数形式，如showMyDreams(show,isBox,byElement),showMyDreams({show,isBox,byElement,allData})