React入门实例

React入门实例

官方文档v16

阮一峰老师的demo

ReactDOM.render

讲模板转换为html，并插入指定节点

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
)
复制代码

JSX语法

Javascript和html混写

html以<开头

Javascript以{开头

如果js中的数据是个数组，就会遍历展开，生成多个元素

var dom = [
    <h1>Hello, World</h1>,
    <h2>React</h2>
]

ReactDOM.render(
    <div>{ dom }</div>,
    document.getElementById('myDemo')
)
复制代码

组件

class HelloWorld extends React.Component{
    render(){
    	return <h1>Hello, {this.props.name}</h1>
    }
}

ReactDOM.render(
    <HelloWorld name="chouchou"></HelloWorld>,
    document.getElementById('app')
)
复制代码

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

this.props.children

组件的所有子节点

有一点要注意，子节点数目不同，返回的结果不同

0个，undefined

1个，Object

多个，array

官方提供了一个方法，React.Children.map来遍历子节点就不用我们管返回值的类型啦

class Notes extends React.Component{
    render() {
        return (
            <ol>
            {
                React.Children.map(this.props.children, function (child) {
                	return <li>{ child }</li>
                })
            }
            </ol>
        )
    }
}
ReactDOM.render(
    <Notes>
        <span>啦啦啦</span>
        <span>呼呼呼</span>
        <span>锵锵锵</span>
    </Notes>,
    document.getElementById('app')
)
复制代码

组件的属性类型PropTypes

验证组件属性的类型，是否必备React.PropTypes.string.isRequired

设置默认值defaultProps

var exam = 111;

class TitleDemo extends React.Component{
    static propTypes = {
        title: PropTypes.string.isRequired
    }
	static defaultProps = {
        title: '默认值'
    }
    render(){
        return (
            <h1>{ this.props.title }</h1>
        )
    }
}

// 传入的值不合规还是会渲染，但是控制台会报错的
ReactDOM.render(
    <TitleDemo title={exam} />,
    document.getElementById('app')
)
复制代码

获取到真实的DOM，ref

类似于vue

class MyRef extends React.Component {
    constructor(props){
        super(props);
        this.myTextInput = React.createRef();
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        this.myTextInput.current.focus();
    }
    render(){
        return (
            <div>
                <input type="text" ref={this.myTextInput} /> 
                <input type="button" value="点击输入文字" onClick={this.handleClick} /> 
            </div> 
        )
    }
}

ReactDOM.render(
    <MyRef />,
    document.getElementById('app')
)
复制代码

组件被看做一个状态机，state

this.state定义会随着用户互动而产生变化的特性。

1. 定义一个初始状态getInitialState
2. 有一个render函数，渲染组件
3. 用户的互动写一个事件，来通过this.setState来改变状态值
4. 每次改，都会自动调用render，重新渲染

class ChouButton extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            chou: false
        }
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick(event){
        this.setState({ chou: !this.state.chou })
    }
    render(){
        let text = this.state.chou ? 'chou' : 'haven\'t choued'
        return (
            <p onClick={this.handleClick}>
                You {text} this. Click to toggle.
            </p>
        )
    }
}

ReactDOM.render(
    <ChouButton />,
    document.getElementById('app')
)
复制代码

表单

用户输入，是跟表单的互动，不能使用this.props.value一类的去直接获取

只能通过事件触发，改变的是state

class AppInput extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            value: 'Hello'
        }
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(event){
        this.setState({ value: event.target.value });
    }
    render(){
        let value = this.state.value;
        return (
            <div>
                <input type="text" value={value} onChange={this.handleChange} />
                <p>{ value }</p>
            </div>
        )
    }
}

ReactDOM.render(
    <AppInput />,
    document.getElementById('app')
)
复制代码

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