react笔记

学习react的优势

持续高热度:关注的人多，你遇到问题解决的可能性和途径就会多。良好生态:几乎所有开发需求都有成熟的解决方案。官方文档超级详细：很多react相关书都是参考官方文档容易上手：只需要你有基本的html+css+js基础，主要是js 小伙伴多：在活跃的react社区，说不定还能解决你的单身问题。

安装

npx create-react-app myapp
npm install -g create-react-app create-react-app myapp

函数组件

function Header(){
  return <h1>我是头部</h1>;
}

类组件

import React, {Component} from 'react'
class App extends Component{
    render(){
        return (
            <div>
                hello world
            </div>
        )
    }
}
export default App;

Jsx

  <h1>{false?"hello":"world"}</h1>

实现todolist

import React,{Fragment} from 'react'
const Component = React.Component
class TodoList extends Component {

  render() {
    return (
      <Fragment>
        <div><input type="text" /> <button> 添加 </button></div>
               <ul>
                   <li>学习react</li>
                   <li>学习vue</li>
               </ul>
     </Fragment>
    );
  }
}

export default TodoList;

响应式设计

    constructor(props){
    //调用父类的构造函数，固定写法
    //虽然props不用可以不写，但官方推荐你这样写
        super(props)
        this.state={
            inputValue:'' , // 关联input输入的值
            list:[]    //事务列表
        }
    }

绑定语法

<input value={this.state.inputValue} type="text" />

react不允许直接对状态进行修改，需要使用this.setState方法 this的指向有问题，上下文this不一致

changeInputValue = (e) => {
    this.setState({
      inputValue: e.target.value
    })
  }

列表渲染

<ul>
 {
  this.state.list.map((item,index)=>{
  return <li>{item}</li>
  })
  }
</ul>

react大厂必备

CATALOG

FEATURED TAGS

FRIENDS