react创建组件

---

---

• 创建组件：

function Hello(){

return <div>Hello 组件</div>

}

• 为组件传递数据

<Hello name={dog.name} age={dog.age}></Hello>
//构造函数中，使用props形参接收外界传递过来的数据
function Hello(props){
	//如果在一个组件中return一个null，则表示次组件是空的，什么都不会渲染
	//return null
	//在组件中，必须返回一个合法的JSX虚拟DOM元素
	//props.name=‘执行’
	console.log(props)
	结论：+不论是react还是vue，props里的内容都是只读的
	return <div>这是Hello组件---{props..name}----{props.age}</div>
}

• webpack.config.js的配置

 resolve:{
​     extensiols:['.js','.json','.jsx'],//表示，这几个文件的后缀名，可以省略不写
​     alias:{//表示别名
​          '@':path.join(__dirname,'./src')//这样@就表示项目根目录中的src的这一层路径
​        }
​    },

两种创建组件方式的对比

1. 注意：使用class关键字创建的组件，有自己的私有数据（this.state）和私有生命周期函数（有状态组件）（用的最多）

2. 注意：使用function创建的组件，只有props，没有自己的私有数据和生命周期函数（无状态组件）（以后不常用个）

3. 如果一个组件需要自己的私有数据，推荐使用class创建的有状态组件，反之，用无状态组件

• > 有无状态组件之间的本质区别是：有无state属性，和有无生命周期函数

  4.组件中的props和state/data之间的区别

• props中的数据都是外界传递过来的

• state和data中的数据，都是组价私有的（通过Ajax获取回来的数据，一般都是私有的数据）

• props中的数据都是只读的，不能重新编辑

• state/data中的数据，都是可读可写的

---

第一步：在webpack.config.js中配置{test:/.css$/,use:[‘style-loader’,‘css-loader?modules’]}

​ 一定要加？modules。

第二步：将cmtlist.css导入CmtList2.js并用CmtItem接收

第三步：className={CmtItem.title}，用CmtItem点出title，这样就样式就唯一了

---

使用localIdentName自定义生成的类名格式，可选参数有：

​ 1. [path]表示样式表 相对于项目根目录 所在路径 src-css

​ 2. [name]表示样式表文件名称 src-css-cmtitem

​ 3. [local]表示样式的类名定义名称 src-css-cmtitem-title src-css-cmtitem-content src-css-cmtitem-cmtbox

​ 4. [hash:length]表示32位的hash值 src-css-cmtitem-title-12654

例子{test:/.css$/,use:[‘style-loader’,‘css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]’]}

​ &localIdentName=[path] [name] -[local]-[hash:5]

---

使用 :local() 和 :global() **

:local()包裹的类名，是被模块化的类型，只能通过classNAme={cssObj.类名}来使用

​ 同时，：local默认可以不写，这样，默认在样式表中定义的类名都是被模块化的类名

:global()包裹的类名，是全局生效的，不会被css-modules控制，定义的类名是什么，就使用定义的类名className=“类名”

注意：只有.title这样的样式选择器才会被模块化控制，类似于body这样的标签选择器，不会被模块化控制

在css样式中，如果你不想让title模块化，可以在样式表中更改这些 .title{} 为 :global(.test){}

两个className进行拼接

​ 1. <h1 className={CmtIttem.title +’ title’}>

​ 2. <h1 className={[CmtIttem.title,‘title’].join(’ ')}>

---

在项目中，启用模块化并同时使用bootstrap

1.把自己的样式表，定义为.scss文件

2.第三方的样式表，还是定义为.scss文件

3.我们只需要为自己的.scss文件启用模块化即可

4.运行 cnpm i sass-loader node-sass -D安装能够解析scss文件的loader

配置loader：

    {test:/\.css$/,use:['style-loader','css-loader']},

    {test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader'},

    {test:/\.scss$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]','.sass-loader']},

---

react中绑定事件的注意点

1.事件的名称都是react提供的，因此名称的首字母必须大写onClick onMouseOver

2.为时间提供的处理函数，必须是如下格式

  onClick={function}

3.用的最多的事件绑定形式为：

​ 注意：

    <button onClick={()=>this.show('传参')}>按钮</button>

​ //事件的处理函数，需要定义为一个箭头函数，然后复制给函数名称

   show=(arg1)=>{
      console.log('show方法'+arg1)
   }

4.在react中，如果想要修改state中的数据，推荐使用this.setstate({})

---

在react中，推荐使用this.setState（{}）修改状态值，对state重新赋值

​

// 这是一个实例方法
myclickHandler=(arg1,arg2)=>{        
	// 注意:在react中，如果想要为state中的数据，重新赋值，不使用	this.state.***=值
	// 应该调用react提供的this.setState({msg:'123'})
	// 在react中，推荐使用this.setState（{}）修改状态值，对state重新赋值
	
	this.setState({
		// 在setState，只会把对应的state状态更新，而不会覆盖其他的state状态
		
		msg:'456'+arg1+arg2
	},function(){
		console.log(this.state.msg)
		})
		
	// 注意：在this.setState方法的执行是异步的
	// 如果在调用完this.setState之后，又想立即获取最新的state的值，需要使用this.setState({},callback)
}

注意：在this.setState方法的执行是异步的

​ 如果在调用完this.setState之后，又想立即获取最新的state的值，需要使用this.setState({},callback)

---

使用代码注释

//#region

//#endregion

---

使用ref获取DOM元素引用

和Vue差不多，vue为页面上的元素提供了ref的属性，如果想要获取元素引用，则需要使用 this.$refs.引用名称

在react中，也有ref，如果要获取元素的引用 this.refs.引用名称

组件的生命周期

组件创建阶段

componentWillMount：组件将要被挂载，此时还没有开始渲染虚拟的DOM

render：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了

componentDidMount：组件完成了挂载，此时，组件已经显示到了页面上，当这个方法执行完，组件就进入了运行状态

组件运行阶段

componentWillReceiveProps：组件将要接收新的属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值

shouldComponentUpdate：组件是否需要被更新，此时，组件尚未被更新，但是，state和props肯定是最新的

componentWillUpdate：组件将要被更新，此时，尚未开始更新，内存中的虚拟DOM数还是旧的

render：此时，又重新根据最新的state和props从新渲染一颗内存中的虚拟DOM数，当render调用完毕，内存中的旧DOM树，已经背心的DOM树替换了，此时页面还是旧的

componentDidUpdate：此时，页面又被重新渲染了，state和虚拟DOM和页面已经完全保持同步

组件销毁阶段

componentWillUnmount:组件将要被卸载，此时组件还可以正常使用

扩展

context特性