react小结

Posted 2020-09-05 超然haha

react基础小结

1. 例子

import React from ‘react‘ 
import { render } from ‘react-dom‘ 

// 定义组件 
class Hello extends React.Component { 
    render() {
         // return 里面写jsx语法 
        return ( <p>hello world</p> ) 
    }
}

 // 渲染组件到页面
render( <Hello/>, document.getElementById(‘root‘) )
    

import React from ‘react‘
这里的react对应的是./package.json文件中dependencies中的‘react‘，即在该目录下用npm install安装的 react 。npm 安装的 react 的物理文件是存放在 ./node_modules/react中的，因此引用的东西肯定就在这个文件夹里面。

./node_modules/react/package.json中的"main": "react.js",，这里的main即指定了入口文件，即./node_modules/react/react.js这个文件

2. jsx语法
1）使用一个父节点包裹
jsx中不能一次性返回零散的多个节点，如果有多个则包含到一个节点中
如：

return (
    <div> 
        <p>段落1</p> 
        <p>段落2</p> 
        <p>段落3</p> 
    </div> 
)

3. 注释
jsx中用{/**/}的注释形式
如：

return(
    //jsx外的注释
    <div>
        {/*jsx里面的注释*/}
        <p>hello</p>
    </div>
)

 

4. 样式

css样式：

<p className="class1">hello</p>
<!--用className代替class*/

 

内联样式：

<p style={{color:‘red‘,fontSize:‘20px‘}}>hello</p>
<!--注意{{}},和驼峰写法-->

5. 事件

如：click

class Hello extends React.Component{
    render(){
        return (
            <p onClick={this.clickHandler.bind(this)}>hello</p>
        )
    }
    
    clickHandler(event){
        console.log(‘yes‘)
    }
}

 

 注意：onClick驼峰写法

 

6. 循环

7. 判断

jsx中一般会用到三元表达式（表达式也是放在{}中的）

如：

return(
    <div>
        <p>段落1</p>
        {
            true
            ? <p> true </p>
            : <p> false </p>
            </div>
        }
    </div>
)

 也可以这样使用：

 

<p style={{display: true? ‘block‘ ? ‘none‘}}> hello world</p>

 

8. 数据传递&数据变化

1） props

 如果

<Header title="Hello页面"/>

 

在Header组件中可以这样取到

render(){
    return(
        <p>{this.props.title}</p>
    )
}

 

在react中，父组件给子组件传递数据时，就是以上的方式，通过给子组件设置props，子组件获取props中的值便可完成数据传递。 

 

2）props&state

如果组件内部自身的属性发生变化

class Hello extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state={
            //显示当前时间
            now:Date.now()
        }
    }
    render(){
        return(
            <div>
                <p>hello world {this.state.now}</p>
            </div>
        )
     }
}

 

 react会实时监听每个组件的props和state值，一旦有变化，会立刻更新组件，将结果重新渲染到页面上

var LikeButton = React.createClass({
        getInitialState: function (){
            return {liked : false};
        },
        handleClick: function (event) {
            this.setState({liked: !this.state.liked});
        },
        render: function(){
            var text = this.state.liked ? ‘like‘ : ‘haven\‘t liked‘;                
            return (
                <p onClick={this.handleClick}>
                    you {text} this click to toggle
                </p>
            );
        }
    });

 

3）智能组件&木偶组件