react学习笔记

1）创建react组件

class ShoppingList extends React.Component {//组件名为ShoppingList
  render() {//render中 html标签的写法成为JSX语法
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>//通过this.props可以获取到父组件中传过来的值
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

//从Board组件传递一个名为 value 的 prop 到 Square 当中：
class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

class Square extends React.Component {

　　constructor(props) {  //构造函数

　　 super(props);//调用父组件中的属性    

　　 this.state = {

　　  value: null,    
　　
　　};  
}

  render() {
    return (
      <button className="square" onClick={()=>{alert(this.props.value)}}>
        {this.props.value}//通过props调用父组件中的值
      </button>
    );
  }
}

注意

在 JavaScript class 中，每次你定义其子类的构造函数时，都需要调用 super 方法。因此，在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头。

class Animal{
    // 每一个类中都有一个构造器(构造函数），若没有指定构造器，那么这个构造器是隐形的，构造器的作用，就是每当new一个类，必然优先执行构造器中的代码
    constructor(name,age){
        this.name=name;//通过new实例的属性，叫做实例属性：dog.name
        this.age=age;
        // 静态属性，通过构造函数点出来的，直接访问到的属性叫做静态属性。构造函数名.属性
    }
    // 在class内部通过static修饰的属性就是静态属性，例如Animal.info;
    static info="白色的";
    //动物的实例方法
    say(){
        console.log("汪汪~")
    }
    //可以通过dog.say()来执行；
    //动物的静态方法
    static show(){
        console.log("yellow body")
    }
};
const dog=new Animal("大黄",3)

如果需要写的组件中只包含render方法，不包含state，则可以采用函数组件

function Square(props){
   return(
     <button class="square" onClick={props.handleClick(i)}>props.value</button>   
    )  
}    

classAnimal{// 每一个类中都有一个构造器，若没有指定构造器，那么这个构造器是隐形的，构造器的作用，就是每当new一个类，

必然优先执行构造器中的代码constructor(name,age){this.name=name;//通过new实例的属性，叫做实例属性：

dog.namethis.age=age;// 静态属性，通过构造函数点出来的，直接访问到的属性叫做静态属性。构造函数名.属性}// 在class内部通过static修饰的属性就是静态属性，

例如Animal.info;static info="白色的";//动物的实例方法say(){ console.log("汪汪~")}//可以通过dog.say()来执行；//动物的静态方法

staticshow(){ console.log("yellow body")}};const dog=newAnimal("大黄",3)

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);//修改this
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>//绑定事件
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

 react-router路由<switch>作用：当路由相同时，防止重复匹配（不加switch时，所有相同的路由都会匹配到，包括父级路由）

<BrowserRouter>
                <div>
                    <div>
                        <ul>
                            <li>
                                <Link to="/Guide/AboutUs">AboutUs</Link>
                            </li>
                        </ul>
                    </div>//没有switch时，下班这几个都会匹配到
                        <Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
                        <Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
                        <Route path="/Guide" component={ AboutUs } ></Route>
                </div>
            </BrowserRouter>

<Route>组件有如下属性：


path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；
strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；