react-总结2-组件-函数式组件-类组件-组件传值-组件组合-组件添加样式-react中的数据定义-状态的更改/事件定义添加-渲染列表
src
index.js
/*
* 项目入口文件 - 整个项目的灵魂
*/
import React from 'react' // React的顶级库，它里面有很多的React的api，并且我们要向使用jsx，那么必须引入它，它是对jsx的支持
import ReactDOM from 'react-dom' // 它的所用就是将React组件编译为DOM结构，然后插入到浏览器网页中
// React元素 - 普通的jsx - jsx就是虚拟DOM对象模型
// ReactDOM.render( 元素/组件, 一个已有的容器 )
ReactDOM.render(
<h3> React元素 </h3>,
document.querySelector('#root')
)
/* ------- 函数式组件 -------------------------------------------- */
const App = ( props ) => { //这样，我们的内容就可以灵活多遍了
// props参数会接收App组件身上的属性
return <h3> { props.info } </h3>
}
ReactDOM.render(
// App({
// info: 'hello React'
// }),
<App info = 'Hello React'/>, // 改成标签化形式，更符合组件的思维
document.querySelector('#root')
)
4. React元素
- React元素就是一个普通的jsx
5. 函数式组件
- 在React中，函数也可以是一个组件，但是记住了，这个函数必须返回一个jsx结构
- 函数式组件由一个参数 <font style = "color: red">props </font> , 这个props可以接收绑定在函数式组价身上的属性
- 好处：
- js的最大特点： 函数式编程
- react符合函数式编程思想的
- 函数的好处： 复用性高、独立作用域
类组件
打造类组件
import React,{ Component,Fragment } from 'react'
class App extends Component{
render(){
return (
<Fragment> //外壳 唯一根元素 且在展示时不显示
</Fragment>
)
}
}
在16以前的版本 还可以这样创建类组件
React.createClass({
render(){
return ({
<div>
</div>
})
}
})
export default App
组件组合
类组件通过 this.props.children来实现
组件添加样式
1.行内样式
import React, { Component, Fragment } from 'react'
class Csone extends Component {
css2 = {
width: '100px',
height: '100px',
backgroundColor: 'blue'
}
render() {
const css1 = { width: '100px', height: '100px', backgroundColor: 'black' }
return (
<Fragment>
<div style={{ width: '100px', height: '100px', backgroundColor: 'red' }}></div>
<p></p>
<div style={ css1 }></div>
<p></p>
<div style={ this.css2 }></div>
</Fragment>
)
}
}
export default Csone
2.通过类名添加样式
如果要在react中使用 scss 需要安装插件
yarn add node-sass sass-loader -D
npm i node-sass sass-loader -D
3.不同条件添加不同样式
不同条件添加不同样式 需要安装插件
yarn add classname
npm i classname
4.样式组件
通过样式组件添加样式 需要安装插件
npm i styled-components -D 安装到生产环境
import React,{ Component,Fragment } from 'react'
import Styled from 'styled-components'
const Comp = styled.div`
width:100px;
height:100px;
border:1px solid red;
p{ //2.为组件内的标签添加样式
width:50px;
height50px;
//background:black;
background:${props => props.color} 3.接收外部传入的值也可以传入booler值来做判断
}
`
class Csfour extends Component{
render(){
return (
<Fragment>
<Comp clolr = 'red'> //1.样式组件定义的组件 3.可以通过传值给组件添加样式 通过${props => props.color }
<p>//2.还能在组件内加样式
</p>
</Comp>
</Fragment>
)
}
}
react数据定义问题
数据分两种 一种是状态 一种是属性
1.state
只能在当前组件中定义，也只能在当前组件修改
1.直接定义
class Csfour extends Component{
state = {
info:"嘿嘿"
}
render(){
return (
<Fragment>
<div>
{ this.state.info }
</div>
</Fragment>
)
}
}
2.构造函数定义
class Csfour extends Component{
consturctor(){
super()
this.state={
info:'嘿嘿'
}
}
render(){
return (
<Fragment>
<div>
{ this.state.info }
</div>
</Fragment>
)
}
}
<-------------------------------------------------------------------------------->
class Csfour extends Component{
consturctor( props ){//构造函数是默认执行的，如果咱们写了就是对它的手动修改
//consturctor里的props指的是 父组件绑定在子组件Csfour身上的Props
super( props )
//super 继承 将consturctor里的props 赋值给 this.props
this.state={
info:'嘿嘿'
}
}
render(){
return (
<Fragment>
<div>
{ this.state.info }
</div>
</Fragment>
)
}
}
2.props
```
当前组件内是：
属性一旦确定就不可更改
1.外部传入，我们要通过外部来修改
-从组件外部传入的 通过this.props.key使用
2.内部定义
-通过static defaultprops定义 this.props.key使用
属性验证
通过安装npm prop-tyoes -S
```
状态（state）的更改/事件的定义与添加
1.事件处理程的定义
1.事件处理程序我们是直接定义为实例方法
2.事件处理程序我们建议携程箭头函数 - this指向不改变
2.state的更改
1.在React中的状态修改只能使用setState（），React中唯一提供可以更改state的api
2.setState（）的作用是用来更新视图的，在一个事件循环中是异步的
3.this.setState( obj/function,callback )参数有两个
class Csfour extends Component{
consturctor( props ){
super( props )
this.state={
info:'嘿嘿'
}
}
changeState = () => {
this.setState({ //obj形式 this.setState是异步的
info:'嘻嘻'//直接将信息改成我们想要的信息
})
this.setState(() => { //function形式返回值必须是对象
retrun {
info:'嘻嘻'//直接将信息改成我们想要的信息
}
},() => {
回调函数数据变了引起一些其他的变化，可以说是一个数据改变而引起的副作用执行
})
}
render(){
return (
<Fragment>
<button onClick = { this.changeState }>//事件的添加
</button>
<div>
{ this.state.info }
</div>
</Fragment>
)
}
}
渲染列表、添加数据
class Csfour extends Component{
consturctor( props ){
super( props )
this.state={
arr:[1,2,3]
}
}
addF = () => {
this.setState(() => {
this.state.arr.push(4)
return {
arr:this.state.arr
}
})
}
render(){
const {arr} = this.state
return (
<Fragment>
<div>
<button onClick = { this.addF }>
+ 4
</button>
<ul>
{
arr.map((value,index) => <li key = { index }>{ value }</li>)
}
</ul>
</div>
</Fragment>
)
}
}
属性vs状态
相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）
不同点：
1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以
4. 属性不在组件内部修改，状态要改 【 属性只能外部修改，内部不允许修改】
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以
state
state的主要作用是用于组件保存、控制、修改自己的可变状态
state在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。
你可以认为 state是一个局部的、只能被组件自身控制的数据源。
state中状态可以通过 this.setState方法进行更新，setState会导致组件的重新渲染。
props
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。
它是外部传进来的配置参数，组件内部无法控制也无法修改。
除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。
如果搞不清 `state` 和 `props` 的使用场景，记住一个简单的规则：尽量少地用 `state`，多用 `props`。
无状态组件也就是函数式组件
有状态组件就是类组件
经验：
功能复杂，我们使用类组件
功能单一，我们使用函数式组件
组件props要想变，那么久外部修改
组件state要想变，那么组件内部自身通过setState修改
react性能优化一个方案： 就是多使用无状态组件（ 函数式组件 ）