react脚手架创建

利用npm创建脚手架 ``` //创建脚手架 npm -g create-react-app

create-react-app my-app

2. 利用npx创建(安装包用完就删)

npx create-react-app my-app

注：下面是零时安装create-react-app包，初始化脚手架项目后会删除；上面是全局安装create-react-app包，之后只要调用create-react-app就可以创建脚手架

3. npx创建typescript的React模板项目

npx create-react-app my-app-ts –template typescript

# JSX
-JSX:JavaScript XML,W3C定义的一种类似于XML的js扩展语法

    JSX是原生js的语法糖


```javascript
//原生js
    <script type="text/javascript">
        const VDOM=React.createHtmElement('h1',(id="title"),React.createHtmElement('span',(),"hello world"))
    </script>
//jsx写法
    <script type="text/babel">
        const VDOM={
            <h1>
                <span>hell</span>
            </h1>
        }
    </script>

JSX语法规则

1.定义虚拟DOM，不用写引号（字符串写法） 2.标签中用js要使用{} 3.样式类名不用class,要用className 4.内联样式，要用style= 5.只有一个根标签 6.标签必须闭合 7.标签首字母：（1）小写字母开头，将标签转为html中的同名标签，如果html没有同名标签则报错（2）大写字母开头，react会渲染对应组件，若组件没有定义，则报错

React 面向组件编程

原理

数据 -> 虚拟DOM -> 真实DOM
挂载组件

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

函数式组件

//1. 创建组件
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
//2. 渲染组件
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

/*
    执行ReactDOM.render(<MyComponent>)..的背后原理

    1.React解析组件标签，找到<MyComponent>组件
    2.发现组件时函数式组件，然后调用函数，将返回的下虚拟DOM转为真实DOM，然后呈现在页面
*/

类组件

//1.创建组件
class MyComponent extends React.Component{
    //在MyComponent原型对象上，供实例使用
    //render的this是指向MyComponent的实例对象（组件实例对象）
    render(){
        return <h1>hello</h1>
    }
}

//2.渲染组件
ReactDOM.render(<MyComponent/>,document.getElementById('root'))//此处的render与上面的render不一样
/*
    执行ReactDOM.render(<MyComponent>)..的背后原理

    1.React解析组件标签，找到<MyComponent>组件
    2.发现组件时类式组件，然后new出该类的实例（React帮你做），通过该实例调用原型上的render方法
    3.将render返回的下虚拟DOM转为真实DOM，然后呈现在页面
*/

函数组件与类组件：
- 函数组件没有this,类组件才能称为组件实例
- 类组件实例会继承得到state、props和refs

简单组件与复杂组件

简单组件一般没有构造函数

复杂组件有状态（state）的组件,形成状态驱动的页面呈现组件

      <div id="root"></div>

  //1.创建组件
  class MyComponent extends React.Component{

      constructor(props){
          super(props)
          this.state={isHot=true}

          //实例方法=原型链上的weatherChange绑定给实例对象得到新的函数（新函数的this指向实例）

          this.change=this.weatherChange.bind(this)
      }

      render(){
          return <h1 onClick="change">The weather is {isHot?'hot':'cold'}</h1>
      }

      //3.修改状态
      weatherChange(){
          const isHot=this.state.isHot
                
          //通过内置的api去更改状态，且更新是合并，不是替换（即原来的属性不变）
          this.setState({isHot:!isHot})
                
          //this.state.isHot=this.state.isHot?false:true
      }


  }
  //2.渲染组件
  ReactDOM.render(<MyComponent/>,getElementById('root'));

标准化的写法

   //1.创建组件
  class MyComponent extends React.Component{

      constructor(props){
          super(props)
          this.state={isHot=true}

          //实例方法=原型链上的weatherChange绑定给实例对象得到新的函数（新函数的this指向实例）

          this.change=this.weatherChange.bind(this)
      }

      render(){
          return <h1 onClick="change">The weather is {isHot?'hot':'cold'}</h1>
      }

      //3.修改状态,函数赋值、箭头函数的写法，其中的this指向实例对象
      weatherChange=()=>{
          const isHot=this.state.isHot
                
          //通过内置的api去更改状态，且更新是合并，不是替换（即原来的属性不变）
          this.setState({isHot:!isHot})
                
          //this.state.isHot=this.state.isHot?false:true
      }

  }
  //2.渲染组件
  ReactDOM.render(<MyComponent/>,getElementById('root'));

state:状态机，通过改变state中的数据改变页面的呈现
- render()方法中的this是组件实例对象
- 组件自定义方法中的this为undefined,解决办法：
  - 强制绑定this: this.Func = selfDefinedFunc.bind(this)
  - 箭头函数: fun=()=>{}
- 状态数据，不能直接修改

props:组件传值

基本用法

//1.创建组件
class MyComponent extends React.Component{
    //在MyComponent原型对象上，供实例使用
    //render的this是指向MyComponent的实例对象（组件实例对象）

    const {name,age}=this.props
    render(){
        return <h1>hello,{name},your age is:{age}</h1>
    }
}

//2.渲染组件
ReactDOM.render(<MyComponent name="tom" age="18" />,document.getElementById('root'))//此处的render与上面的render不一样
/*
    执行ReactDOM.render(<MyComponent>)..的背后原理

    1.React解析组件标签，找到<MyComponent>组件
    2.发现组件时类式组件，然后new出该类的实例（React帮你做），通过该实例调用原型上的render方法
    3.将render返回的下虚拟DOM转为真实DOM，然后呈现在页面
*/

批量传递 ```javascript //1.创建组件 class MyComponent extends React.Component{ //在MyComponent原型对象上，供实例使用 //render的this是指向MyComponent的实例对象（组件实例对象）

const {name,age}=this.props

render(){ return <h1>hello,{name},your age is:{age}</h1> } } const p={name:’jerry’,age:12,gender:17} //2.渲染组件 //2.1 babel加react同时存在，允许使用结构运算符结构对象,而原生js中是不允许用解构运算符结构对象的，允许结构数组 //2.2 {…p}表示在{}中写js代码，而非 ReactDOM.render(<MyComponent {…p} />,document.getElementById(‘root’))//此处的render与上面的render不一样

- 属性限制

主要是对传入的属性类型进行限制

- props 属性是只读的
      


# ref
1. 字符串形式：过时的api

```javascript
        
  show=()=>{
    let {currentNode}=this.refs
    console.log(currentNode)
    //<input ref="currentNode" onBlur="show"/>
  }
  render()=>{
    return <input ref="currentNode" onBlur="show"/>
  }

回调形式

  render(){
    return <input ref={this.show} onBlur="show"/>
  }

 //定义成class的绑定函数
 //还可以写成内联形式的
  show=(c)=>{
    currentNode=>this.input1 = c
  }

createRef形式: React最推荐的方式

createRef

  class Demo extends React.Component{
          
    <!-- React.createRef调用后返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”的 -->
          
    myRef=React.createRef()

    render(){
      return <input ref={this.myRef} onBlur="show"/>
    }

  }

React

基本学习

react脚手架创建

React 面向组件编程

标准化的写法

props:组件传值

CATALOG

FEATURED TAGS

FRIENDS