部分react小常识，新手观看

• react只是一个视图层框架，只解决数据渲染的问题

• 常常与其它框架结合使用

• 前端自动化测试：react函数式的编程利于测试，向函数传值即可测试

react 安装

• create-react-app <项目名>
• index.js 是整个项目的入口文件

自动化测试文件 App.test.js

• 下面是组件的一种写法

import React,{ Component } from 'react';

class App extends Component {
  render(){
    //   JSX
    return(
      <div>
        hello,zhao
        </div>
    )
  };
}

export default App;

//PWA progressive web application
// 运行于https协议上的网页，它可以在断网的情况下将浏览过的网页正常展示
import * as serviceWorker from './serviceWorker';

• 在react中render(){}函数里面的标签都是jsx语法，所以组件里面也都要引入react:(import { Component } from ‘react’;）

父组件向子组件

父: return (
            <Input 
            content={item} 
            inde={index} 
            delete={this.delete.bind(this)}
                />
              );
子：return (
      <Fragment>
        <div onClick={this.delete.bind(this)}>
        {this.props.content}
        </div>
      </Fragment>
    )

## 子组件向父组件：

由于react中有一个单向数据流的概念,所以：

子组件不可以直接修改父组件的值，只可以通过父组件传过来的函数修改（即实现子组件向父组件传值）

// 一般来讲，将this的指向绑定放在构造函数constructor中，如：
    this.deletes = this.deletes.bind(this)

函数中setState的几种写法：

1:
handleInputChange(e){
this. setState(()=>{
return{r inputValue:e. target. value
})
2：   ------------->箭头函数右边的小括号表示小括号里面返回的是一个对象；
handLeInputChange(e){
  // 外层保存，内部使用
  const value=e.target.value //必须在setState外面这同样写，不然会报错（异步）
this.setState(()=>({
inputValue:value
}))

• 当组件的state或者props发生改变的时候，render函数就会重新执行,这也是为什么react联动

• 当父组件的render函数被运行时，它的子组件的render都将被重新运