react基础知识

前言

npm i react --save
npm i react-dom -save

建立一个目录js
把 node_modules/react/umd／react.development.js 拷贝到js目录下
把 node_modules/react－dom/umd／react-dom.development.js 拷贝到js目录下
建立一个html文件
先引入 react.development.js
再引入 react-dom.development.js web才使用/ ReactDOM

jsx 语法
javascript扩展意思 javascript+xml
babel
es6–>es5
// npm i babel-standalone --save // 解析jsx

    <script type="text/babel">
      ReactDOM.render(jsx表达式,挂载的节点)
    </script>

jsx不是必须的，原理是用React.createElement创建节点。但是用jsx可以提高开发的效率

1.jsx语法

javascript扩展意思  javascript+xml
var str = <h2>111</h2> 
{str}   {差值表达式} //对象不能直接渲染 //标签中<!-- -->和// 注释不能写
onXxx  //事件的首个字母要大写
style={{key:value...}} //第一个大括号插值表达式 // 第二层大括号 对象/值 
//类名 在jsx中现在不能设置class （虽然会显示但是报错，这是原生的关键字） --> 需要使用className
//在react中 需要用  for-->htmlFor
//   value-->defaultValue input:text需要改为defaultValue 才可以修改
//   checked -->defaultChecked input:checkbox需要改为
//   jsx中注释{/* */}
//  class-->className
//  for htmlFor
<script type="text/babel"> // babel两个作用  es6—>es5   解析jsx 
// jsx不是必须的，原理是用React.createElement创建节点      但是用jsx可以提高开发的效率

遍历列表推荐用数组的map方法
遍历多个列表可以封装为函数
用无状态组件去渲染列表
遍历对象

var 组件=(props)=>{  //无状态组件
        props就可以接受父组件传过来的值
   		return jsx表达式
	}
	<组件 属性={值} />
 //  组件的首字母要大写
Object.entries 对象的键值对形成的数组
Object.values 对象的值形成的数组
Object.keys 对象的键行成的数组

2.组件

2.1无状态组件(rcf)

vscode插件名 ES7 React/Redux/GraphQL/React-Native snippet

var 组件=(props)=>{ //无状态组件 组件的首字母要大写  props就可以接受父组件传过来的值
  return jsx表达式
}
<组件 属性={值} {...对象} /> //使用时
无状态组件的默认值   类名.defaultProps={key:默认值}
无状态的props验证     import {PropTypes} from 'prop-types'     
类名.propTypes ={ //类型检查
   key :PropTypes.number.isRequired
}
Hook 不编写 class 的情况下使用 state 以及其他的 React 特性。
let    [状态变量，修改状态变量的函数]＝useState(默认值) 
useEffect（）  componentDidMount componentDidUpdate

2.2类组件 (rcc)

2.2.1.定义一个类组件

   class 组件的名字 extends React.Component {
       render(){  //必须有
           return 组件的内容   //return 必须有
       }
   }

2.2.2 类组件的三个常用属性 （state props refs)

state    setState({key:value})  setState((prevState,props)=>{   })
props  this.props   //只读 构造函数里拿到props  super(props)
refs

context    createContext()    Provider 生产者   Consumer 消费者   
<Provider value={数据}></Provider>
render()  <Context.Consumer>{(value)=>{return value 就是传过来的值}}</Context.Consumer>
其他的钩子函数拿到context的值
static contextType=context;   可以用 this.context  拿到上下文对象传过来的值
<Tag ref="xxx" /> //1.  this.refs.xxx就找打了这个节点
<Tag ref={(node变量代表当前节点)=>this.txt=node} /> //this.txt 就找到了节点  //2.官网推荐

2.2.3 钩子

    挂载阶段
    constructor
    static getDerivedStateFromProps //从Props获得派生状态 Derived导出的；衍生的，派生的 FromProps从Props
    render 
    componentDidMount 
    
    componentDidUpdate(prevProps,prevState,snapshot)
    componentWillUnmount//老版 从Props获得派生状态 不推荐
     ```
2.2.4 事件处理函数要绑定this 或用箭头函数
类组件props的默认值   static  defaultProps={ key:value}
类组件做props验证  prop-types
```javascript
staic propTypes ={ //类型检查
   key :PropTypes.number.isRequired
}

2.3.受控组件

// 受控组件   受到状态控制的组件，叫受控组件
<select value={this.state.变量} onChange={this.change}>
  <option>xxx</option>
  <option>yyy</option>
</select>
​
//单选钮
  <input type="radio" id="sel" name="sel" value="是"
  checked={this.state.sel==="是"?true:false} onChange={this.change} />是
//复选框
  <input id="vip" type="checkbox" checked={this.state.vip} onChange={this.change} />

3.派生状态(DerivedState)

自己的state来自于父组件的props derivedState 派生状态
package.json

 scripts:{
 	"test":"webpack --version"
 }
 npm run  test  查看项目内的webpack的版本

4.永远不要直接修改state的值，因为会视图不同步,修改state用setState 连续多次setState会怎么样？

4.1 一个参数 //直接连续多次执行，对象会合并同一内容只执行最后一次

this.setState({})  
this.setState({ //异步
        n: 3,
        b:999,
    })
    this.setState({ //异步
        n: 1,
        nb:999,
    })//得到{n:1,}

4.2. 两个参数 {}和function 多次连续执行，会依次执行

this.setState({
	key:value
},callback)
this.setState((prevState,props)=>{})  
    this.setState((old, props)=>{
        return {
            n:old.n+1
        }
    })
    this.setState((prevState, props)=>{ // 多次连续执行
        return {
            n:prevState.n+1
        }
    })//得到{n:3} == n+1+1

5.组件传值

5.1 父组件将向子组件传值 属性传递 props接收 props是只读的，不能更改 父组件<组件 {…obj} /> 子组件props

state来自于父组件的props derivedState 派生状态

5.2 子组件向父组件传值 子组件调用父组件方法，通过参数进行传值的。

5.3.兄弟组件传值

// bind绑定this会产生了新的函数，所以需要用箭头函数见bus.react

 pubsub-js
 PubSub.publish("事件名","数据")                    ($emit)   触发事件
 PubSub.subscribe("事件名",(msg,data)=>{  })   ($on)  监听事件
 父组件将向子组件传值-子组件向父组件传值
 观察者模式
 e.stopPropagation() 阻止冒泡

6.生命周期的钩子函数

6.1.挂载阶段

constructor(props,context)
static getDerivedStateFromProps(props,state) //从Props获得派生状态 Derived导出的；衍生的，派生的 FromProps从Props
render()
componentDidMount() //模块渲染后

6.2.更新阶段

getDerivedStateFromProps(props,context)
shouldComponentUpdate(nextProps,nextState) 
 //性能优化 返回布尔值，true render false 不渲染
//(PureComponent 纯组件 浅比对 可以优化渲染的次数)
//无状态组件是用 React.memo(无状态组件)
render()
​
getSnapshotBeforeUpdate(prevProps,prevState)  
返回 Snapshot 数据更新前的dom状态 必须和 componentDidUpdate 一起使用
​
componentDidUpdate(prevProps,prevState,snapShot)
监控组件里的数据变化

6.3.卸载

componentWillUnmount() 

6.4.context传值（高级)

createContext()   Provider  提供数据    Consumer 消费数组 

6.5.children <组件> 中间的内容</组件>

组件里 用{this.props.children}拿到中间的内容

6.6.高阶组件（Hoc)

本质是高阶函数   参数是组件，返回值也是组件这个样的组件叫高阶组件
//属性代理
//反向继承

7.react 环境

7.1 react 官方脚手架环境

 npm i create-react-app -g
 create-react-app --version
 create-react-app 项目的名字

7.2 第三方工具

7.2.1.axios
7.2.2.json-server

   npm i json-server -g
   json-server --version
  get 查找
  post 添加
  delete 删除
  修改 patch 修改
  json-server xxxx.json --port 端口号

8.弹射

引用图片 <img src={require("图片的路径“)} ／>​
//弹射 用处不大
npm run eject 弹射 把配置文件放到项目的根目录中​
git add .
git commit -m "feat: commit all"
node_modules/react-scripts/....

未完待续