乐趣区

关于前端:reactts

jiezi

一、react

1、元素渲染

（1）渲染元素

react 会有一个根节点，如果是引入的 react，则须要在不同的中央去定义 react 根节点。
通过 reactDOM.render()将其 dom 节点渲染在页面上

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

（2）更新元素
react 元素被渲染后是不可能被更改的。惟一的办法是创立一个办法，放入到 render 中。
React 只会更新必要的局部

值得注意的是 React DOM 首先会比拟元素内容先后的不同，而在渲染过程中只会更新扭转了的局部。

2、jsx

jsx 是运行在 js 外部的
长处：

  • JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型平安的，在编译过程中就能发现错误。
  • 应用 JSX 编写模板更加简略疾速。

毛病：

  • jsx 不能应用 if else

const element = <h1>Hello, world!</h1>;

react 表达式写在花括号 {}
react 举荐应用内联款式
JSX 容许在模板中插入数组，数组会主动开展所有成员：

var arr = [
  <h1> 菜鸟教程 </h1>,
  <h2> 学的不仅是技术，更是幻想！</h2>,
];
ReactDOM.render(<div>{arr}</div>,
  document.getElementById('example')
);

3、组件

留神，原生 HTML 元素名以小写字母结尾，而自定义的 React 类名以大写字母结尾，比方 HelloMessage 不能写成 helloMessage。除此之外还须要留神组件类只能蕴含一个顶层标签，否则也会报错。

const element = <HelloMessage /> 自定义组件

函数组件

function HelloMessage(props) {return <h1>Hello World!</h1>;}

类组件
在组件中必须实现 render 办法，在 return 中返回 React 对象

class Welcome extends React.Component {render() {return <h1>Hello World!</h1>;}
}

组件传递参数（props）

function HelloMessage(props) {return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

复合组件
咱们能够通过创立多个组件来合成一个组件，即把组件的不同性能点进行拆散。

无状态函数式组件只带有一个 render 办法的组件类

  • 不能被实例化、渲染性能快
  • 组件不能拜访 this 对象
  • 组件不能拜访生命周期办法
  • 无状态组件只能拜访 props

区别：

  • 编写模式
  • 状态治理
  • 生命周期
  • 调用形式
  • 获取渲染的值

useState()
userContext()
userReducer()
useEffect()

// 相当于 componentDidMount 生命周期
useEffect(() => {console.log("Hello");
}, []);

// useEffect 回调函数中 return 一个函数，则 return 函数会在组件卸载的时候执行，正如 componentWillUnmount

React.useEffect(() => {return () => {console.log("Bye");
   };
 }, []);

在应用 hooks 状况下，个别如果函数组件调用 state，则须要创立一个类组件或者 state 晋升到你的父组件中，而后通过 props 对象传递到子组件

调用形式：
函数组件：执行函数
类组件：实例化类，调用实例对象的 render 办法

4、state

react 通过 state 实现用户的交互、页面的渲染（不操作 dom）

在 React 应用程序中，组件是有状态还是无状态被认为是可能随工夫而变动的组件的实现细节。

咱们能够在有状态组件中应用无状态组件，也能够在无状态组件中应用有状态组件。

5、props

state 和 props 次要的区别在于 props 是不可变的，而 state 能够依据与用户交互来扭转

子组件通过 props 来传递数据

6、事件处理

事件的办法须要绑定 this，否则 this 为 undefined。

绑定 this 三种办法：

handleClick = () => {console.log('this is:', this);
}

<button onClick={this.handleClick}>
     Click me
</button>

// bind
<button onClick={this.handleClick.bind(this)}>
     Click me
</button>
// 回调函数
<button onClick={(e) => this.handleClick(e)}>
     Click me
</button>

7、条件渲染

（1）元素变量

通过元素变量判断是否显示或暗藏

（2）与运算符 &&

return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          您有 {unreadMessages.length} 条未读信息。</h2>
      }
    </div>
  );

（3）三目运算符

condition ? true : false

(4)避免组件渲染

if(test) {return null}
不会影响组件的生命周期的回调

8、组件 api

设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取 DOM 节点：findDOMNode
判断组件挂载状态：isMounted

setState
setState(object nextState[, function callback])

etState()总是会触发一次组件重绘

replaceState
replaceState(object nextState[, function callback])

办法只会保留 nextState 中状态，原 state 不在 nextState 中的状态都会被删除。

9、生命周期

Mounting：已插入实在 DOM
Updating：正在被从新渲染
Unmounting：已移出实在 DOM

10、ajax

11、表单事件

onChange 办法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来从新渲染界面。

子组件中更新父组件的 state 时，你须要在父组件通过创立事件句柄 (handleChange)，并作为 prop (updateStateProp) 传递到你的子组件上

<Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>

12、refs

<input ref=”myInput” />

能够通过 ref 获取组件的援用
也能够通过 getDOMNode()办法获取 DOM 元素

13、列表 &keys

Keys 能够在 DOM 中的某些元素被减少或删除的时候帮忙 React 辨认哪些元素产生了变动。因而你该当给数组中的每一个元素赋予一个确定的标识。

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
 
      )}
    </ul>
  );
}

二、redux

三、antd

四、我的项目构建

退出移动版