React扫盲

安装React

npx create-react-app 项目名
cd 项目名
npm start
复制代码

npx操作执行了npm install -g create-react-app操作

组件内容

在components文件夹下新建文件home.js

import React,{ Component }  from 'react';
class Home extends Component{
    constructor(){
        super();  //表示继承Component
        //定义数据
        this.state = {
            name: '张三',
        }
    }
    render(){
        return (
            <div>
                <h2>你好，组件--我是Home组件</h2>
                <p>姓名：{this.state.name}</p>
            </div>
        )
    }
}
export default Home;
复制代码

开头引入React；
class名称和文件名称保持一致，一般开头大写命名；
constructor构造方法和render方法必须存在；
最后export default 导出，以便调用；
super()方法表示继承父组件；
this.state用于存放数值属性；
render函数用于渲染组件界面，返回的JSX语法里只能有一个根节点，当有多行标签的时候使用括号包起来；

组件调用

import Home from './components/Home'
...
render(){
    return (
        <Home />
    )
}
复制代码

值和列表渲染

constructor(){
    super();
    this.state = {
        username: '张三',
        list: [
            {name:'one',age: 1},
            {name:'two',age: 2},
            {name:'three',age: 3},
        ],
    }
}
render(){
    let html = this.state.list.map((item,index) => {
        return (
            <li key={index}>姓名：{item.name}；年龄：{item.age}</li>
        )
    })
    return (
        <div>
            <p>姓名：{this.state.username}</p>
            <ul>
                {res}
            </ul>
        </div>
    )
}
复制代码

值渲染时，需要使用双花括号{}包起来
列表渲染时，每一项都需要有个唯一的key值

• 列表渲染需将数据处理成JSX格式使用

属性关键字

引用资源的两种形式

import src from '../assets/images/demo.jpg'
<img className="img" src={src}/>
<img className="img" src={require('../assets/images/demo.jpg')}/>
复制代码

如上例所示，因为class是关键字，所以在命名样式名字的时候改为className

后续其他关键字都是以驼峰形式命名

<label htmlFor="username">姓名</label>
<input id="username" type="text" onChange={this.inputChange}/>
<button onClick={this.submit}>提交</button>
复制代码

for作为循环关键字，在label中被替换为htmlFor；一些事件的名字，如：onClick,onChange等改写为驼峰式

表单取值

constructor(){
    super();
    this.state={
        username: '',
        age: ''
    }
}
inputName = (e) => {
    //第一种获取表单值的方法 event对象
    this.state.username = e.target.value;
}
inputAge = () => {
    //第二种获取表单值的方法 refs属性
    let val = this.refs.age.value;
    this.setState({
        age: val
    })
}
render(){
    return (
        <div>
            <label htmlFor="username">姓名</label>
            <input id="username" type="text" onChange={this.inputName}/>
        </div>
        <div>
            <label htmlFor="age">年龄</label>
            <input ref="age" id="age" type="text" onChange={this.inputAge}/>
        </div>
        <div>
            <button onClick={this.submit}>提交</button>
        </div>
    )
}
复制代码

• 获取表单可以使用event对象，通过event.target.value直接获取输入框文本
• 使用引用对象refs,即this.refs.age.value获取
  将表单值赋值到状态中，建议使用this.setState()方式，不建议使用this.state.age赋值形式

自定义的方法，如inputName(){}的后面不需要加";"来隔开

模拟双向数据绑定

constructor(props) {
    super(props);
    this.state = {  
        username: '111',
    };
}
inputchange = (e) => {
    this.setState({
        username: e.target.value
    })
}
render() {
    return (
        <div>
            <input type="text" value={this.state.username} onChange={this.inputchange}/>
            {this.state.username}
        </div>
    );
}
复制代码

动态通过赋值回状态里，实现双向数据绑定，这种形式非常类似微信小程序开发

转载于:https://juejin.im/post/5cad5d415188251b183decd1